Адаптивные изображения во встроенном SVG - PullRequest
Новая
       36

Адаптивные изображения во встроенном SVG

0 голосов
/ 27 мая 2020

Я пытался найти пример или ответ на этот вопрос, но не смог.

Как мы оптимизируем изображения, чтобы ненужные большие изображения не загружались, когда они не в этом нет необходимости, это можно сделать, как в примере ниже: 

<img src="http://localhost:8888/example.jpg" alt="sample 1" srcset="http://localhost:8888/example-1024x1024.jpg 1000w, http://localhost:8888/example-300x300.jpg 300w, http://localhost:8888/example-150x150.jpg 150w, http://localhost:8888/example-768x768.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px">

Итак, у меня вопрос, можно ли это сделать таким же образом или каким-либо другим способом с изображениями, используемыми во встроенном SVG для оптимизации.

Изображение, используемое в SVG, как в этом примере: 

<svg role="img" width="100%" height="100%">
  <title>Ocean wave</title>
  <desc>Ocean wave in crystal clear blue water.</desc>
  <defs>
    <filter id="blur">
      ...
    </filter>
  </defs>
  <image href="img/image.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"></image>
</svg>

1 Ответ

0 голосов
/ 28 мая 2020

Использование <foreignObject> вместо <image>, похоже, помогает, поскольку это позволяет вам использовать любой тип элемента HTML внутри SVG. 

<svg role="img" width="100%" height="100%">
  <title>Ocean wave</title>
  <desc>Ocean wave in crystal clear blue water.</desc>
  <defs>
    <filter id="blur">
      ...
    </filter>
  </defs>
  <foreignObject width="100%" height="100%">
    <img src="img/image.jpg" alt="sample 1" srcset="http://localhost:8888/example-1024x1024.jpg 1000w, http://localhost:8888/example-300x300.jpg 300w, http://localhost:8888/example-150x150.jpg 150w, http://localhost:8888/example-768x768.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px">
  </foreignObject>
</svg>
...