- Использование <object> тега
- Использование <iframe> тега
- Использование <img> тега
- Использование непосредственного встраивания (inline SVG )
- Использование <embed> тега
- Использование CSS Background Image
Если вы планируете использовать более продвинутые функции SVG, такие как применение таблицы стилей CSS или внедрение скриптов, то
тег HTML5 <object> лучший способ.
|
1 2 3 |
<object type="image/svg+xml" data="image.svg" width="200" height="200" > Your browser does not support SVG </object> |
Для старых браузеров не поддерживающих SVG есть оригинальный способ замены SVG изображения фоллбек картинкой png:
|
1 2 3 |
<object type="image/svg+xml" data="SvgImg.svg" width="200" height="200"> <img src="SvgImg.png" width="200" height="200" alt="image format png" /> </object> |
Браузер не понимающий SVG проигнорирует тег <object> и перейдет к следующему тегу <img> и обработает его, как обычный HTML тег и выведет картинку.
Для проверки работоспособности SVG анимации кликните на кнопки “GO” и “STOP”.
|
1 2 3 4 5 6 |
<svg ...=""> <style> /* SVG specific fancy CSS styling here */ </style> ... </svg> |
Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов <iframe>.
|
1 2 3 |
<iframe src="SvgImg.svg"> <img src="SvgImg.png" width="200" height="200" alt="image format png" /> </iframe> |
Это может быть хорошим методом, если вы хотите полностью отделить SVG код и скрипт на вашей главной странице. Однако манипуляции SVG изображениями с главной страницы при помощи <JavaScript будут немного сложнее.
В данном примере анимация работает, так как команды на её реализацию находятся внутри файла SVG.
SVG документ может быть добавлен на вашу веб страницу, как любое другое изображение:
|
1 |
<img src="image.svg" width="200" height="200" alt="image description"> |
Для браузеров не воспринимающих SVG David Bushell предложил прием подмены *.svg изображением *.png.
|
1 |
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'"> |
Можно, как обычно для любого другого изображения задать ширину, высоту. Но почему этот способ добавления SVG, не стал самым распространенным способом?
По соображениям безопастности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE9, Safari, Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Embedded SVG</title> </head> <body> <h1>Embedded SVG</h1> <!-- SVG code --> <svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="50" font-size="30">My SVG</text> </svg> </body> </html> |
Этот метод работает почти во всех HTML5 браузерах и также поддерживает анимацию, скрипты и CSS.
Но должны ли мы использовать его?
Я включил <embed> тег в целях указаний всех возможностей внедрения SVG в HTML страницу, но никогда не используйте этот тег.
Потому что тег <embed> никогда не был и наверное не будет частью спецификации HTML или XHTML. Однако этот тег поддерживается большинством браузеров и часто используется для реализации флэш плагинов.
Вот код. Он работает, но не используйте его!
|
1 |
<embed type="image/svg+xml" src="image.svg" /> |
SVG может быть использован в качестве CSS фона для любого элемента:
|
1 2 3 4 |
#AnyElement { background-image: url(image.svg); } |
Как и при использовании тега <img> связывание, скриптование и другие методы интерактивности будут недоступны.
В большинстве случаев для встраивания SVG изображений рекомендуют использовать <object> тег.
Это самый надежный метод для обеспечения интерактивности.
Для SVG изображений без интерактивности может быть использован метод <img> и CSS background.
Inline SVG или <iframe> возможны в некоторых проектах.
Лучше избегать встраивания в веб страницу с помощью<embed>