5

Object:

 <object type="image/svg+xml" data="image.svg"></object>

Embed:

<embed type="image/svg+xml" src="image.svg" />

iframe:

<iframe src="image.svg"></iframe>

IMG:

<img src="image.svg" />

background-image:

#image {
  background-image: url(image.svg);
}
1
  • 1
    По стандартам тег <svg> является контейнером для масштабируемой векторной графики. Лучше придерживаться этого "правила".
    – DogeDev
    31 авг 2017 в 20:42

2 ответа 2

4

Всё зависит от ваших потребностей, каждый метод дает определенные возможности и накладывает ограничения.

Если вам просто надо вставить готовую картинку, то стоит делать это так:

<img src="image.svg" alt="Image description" />

Соответственно, всё, что вы сможете - это менять ширину и высоту картинки, не более. Менять свойства элементов, анимировать их и всё прочее вы не сможете. А значит, никакого интерактива. Всё тоже самое справедливо и для вставки SVG как фонового изображения через CSS.

<object>, <embed> и <iframe> - это братья по разуму, в данном случае. Этим способом вы подключаете SVG как другую страницу, а значит требования по безопасности вставки растут, поскольку объект может содержать скрипты - с другого домена по-простому уже не вставить.

Ну и вы не упомянули еще один способ, а именно вставку векторной графики как тега <svg />. Когда вы вставляете SVG таким способом, у вас есть полный контроль над тем, что происходит внутри изображения, через CSS. Поменять цвет, повернуть, добавить анимацию, изменить размер при наведении и всё остальное, что только может прийти в голову. Но за это приходится платить - вы уже не сможете лениво подгрузить этот файл, браузер не сможет загрузить ресурс с более низким приоритетом, всё будет приходить прямо в теле ответа сервера и будет разбираться парсером браузера в первую очередь. Соответственно, кэшироваться ресурс тоже не будет.

1
  • отличный полный ответ, не понятно, почему его оценили недостаточно (+) 27 фев 2019 в 8:14
3

Лучший тег для svg - это svg! Потому что только так вы в дальнейшем сможете им манипулировать. А вообще все зависит от целей, если просто показать картинку - img, если фоном пустить - то используйте background-image.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.