Как добавить SVG в HTML5 страницу

  1. Использование <object> тега
  2. Использование <iframe> тега
  3. Использование <img> тега
  4. Использование непосредственного встраивания (inline SVG )
  5. Использование <embed> тега
  6. Использование CSS Background Image
1. Использование <object> тега.

Если вы планируете использовать более продвинутые функции SVG, такие как применение таблицы стилей CSS или внедрение скриптов, то
тег HTML5 <object> лучший способ.

Для старых браузеров не поддерживающих SVG есть оригинальный способ замены SVG изображения фоллбек картинкой png:

image format png
Браузер не понимающий SVG проигнорирует тег <object> и перейдет к следующему тегу <img> и обработает его, как обычный HTML тег и выведет картинку.
Для проверки работоспособности SVG анимации кликните на кнопки “GO” и “STOP”.

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

2. Использование <iframe> тега.

Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов <iframe>.


Это может быть хорошим методом, если вы хотите полностью отделить SVG код и скрипт на вашей главной странице. Однако манипуляции SVG изображениями с главной страницы при помощи <JavaScript будут немного сложнее.
В данном примере анимация работает, так как команды на её реализацию находятся внутри файла SVG.

3. Использование <img> тега.

SVG документ может быть добавлен на вашу веб страницу, как любое другое изображение:

Для браузеров не воспринимающих SVG David Bushell предложил прием подмены *.svg изображением *.png.

Можно, как обычно для любого другого изображения задать ширину, высоту. Но почему этот способ добавления SVG, не стал самым распространенным способом?

По соображениям безопастности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE9, Safari, Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.

4. Использование непосредственного встраивания (inline SVG ).

Этот метод работает почти во всех HTML5 браузерах и также поддерживает анимацию, скрипты и CSS.
Но должны ли мы использовать его?

Такой вариант возможен для небольших SVG изображений или для встраиваемых с помощью JavaScript изображений, но я рекомендую Вам сохранять эти SVG изображения в отдельные файлы, если это возможно. Так как этот метод не позволяет поддерживать кэширование.
5. Использование <embed> тега.

Я включил <embed> тег в целях указаний всех возможностей внедрения SVG в HTML страницу, но никогда не используйте этот тег.
Потому что тег <embed> никогда не был и наверное не будет частью спецификации HTML или XHTML. Однако этот тег поддерживается большинством браузеров и часто используется для реализации флэш плагинов.
Вот код. Он работает, но не используйте его!

6. Использование CSS Background Image.

SVG может быть использован в качестве CSS фона для любого элемента:

Как и при использовании тега <img> связывание, скриптование и другие методы интерактивности будут недоступны.

Какой метод встраивания SVG в HTML5 страницу использовать?

В большинстве случаев для встраивания SVG изображений рекомендуют использовать <object> тег.
Это самый надежный метод для обеспечения интерактивности.
Для SVG изображений без интерактивности может быть использован метод <img> и CSS background.
Inline SVG или <iframe> возможны в некоторых проектах.
Лучше избегать встраивания в веб страницу с помощью<embed>

Источники:
  1. How to Add Scalable Vector Graphics to Your Web Page by Craig Buckler
  2. Using SVG by Chris Coyier
  3. A Primer to Front-end SVG Hacking by David Bushell
  4. Styling And Animating SVGs With CSS by By Sara Soueidan

⇚ Структура SVG документа viewport и viewBox ⇛

Добавить комментарий