SVG или масштабируемая векторная графика позволяют создавать более сложные изображения и отображать их на веб-страницах. Но вы не можете просто взять теги SVG и пощекотать их в свой HTML. Они не будут отображаться, и ваша страница будет недействительной. Вместо этого вы должны использовать один из трех методов.
Использование тега объекта для вставки SVG
HTML-тег будет вставлять SVG-графику на вашу веб-страницу. Вы пишете тег объекта атрибутом данных для определения файла SVG, который хотите открыть. Также вы должны указать атрибуты width и height для определения ширины и высоты вашего SVG-изображения (в пикселях).
Для совместимости с несколькими браузерами вы должны включить атрибут type, который должен читать:
тип = "изображение / SVG + XML"
и код для браузеров, которые его не поддерживают (Internet Explorer 8 и ниже). Ваша кодовая база будет указывать на SVG-плагин для браузеров, которые не поддерживают SVG. Наиболее часто используемый плагин - от Adobe по адресу http://www.adobe.com/svg/viewer/install/. Однако этот плагин больше не поддерживается Adobe. Другим вариантом является Ssrc SVG-плагин от Savarese Software Research по адресу http://www.savarese.com/software/svgplugin/.
Ваш объект будет выглядеть так:
Советы по использованию объекта для SVG
- Убедитесь, что ширина и высота не меньше, чем изображение, которое вы вставляете. В противном случае ваше изображение может быть обрезано.
- Ваш SVG может отображаться неправильно, если вы не указали правильный тип контента (
тип = "изображение / SVG + XML"), поэтому я не рекомендую оставлять это. - Вы можете включить резервную информацию внутри
объекттег для браузеров, которые не будут отображать SVG-файлы. - Вы также можете установить источник SVG и тип содержимого в параметрах. Это может работать лучше в IE 6 и 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
Обратите внимание, что для этого требуется classid.
Просмотр SVG в примере тега объекта.
Вставить SVG с тегом Embed
Другой вариант, который вы используете для включения SVG, - это использовать тег. Вы используете почти те же атрибуты, что и тег объекта, включая ширину, высоту, тип и кодовую базу. Единственное отличие состоит в том, что вместо данные, вы поместите URL-адрес документа SVG в атрибут src.
Ваша вставка будет выглядеть так:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
Советы по использованию Embed для SVG
- Тег embed недействителен HTML4, но он действителен HTML5, поэтому, если вы используете его на странице HTML4, вы должны помнить, что ваша страница не будет проверяться.
- Для обеспечения лучшей совместимости используйте полностью кволизованное доменное имя в атрибуте src.
- Также есть сообщения о том, что использование тега embed с плагином Adobe приведет к сбою версии Mozilla с 1.0 до 1.4.
Просмотр SVG в примере тега embed.
Используйте iframe для включения SVG
Iframes - еще один простой способ включить изображение SVG на ваши веб-страницы. Для этого требуется только три атрибута: ширина и высота, как обычно, и src, указывающие на местоположение вашего файла SVG.
Ваш iframe будет выглядеть так:
Советы по использованию iframe для SVG
IFrame будет отображаться с рамкой вокруг вашего изображения, если вы не удалите границу со стилем, например
стиль = «границы: нет;»
В iframe не указывается местоположение плагина, поэтому, если в браузере клиента нет плагина, они могут вообще ничего не видеть или могут появиться сообщение об ошибке.
Просмотр SVG в примере тега iframe.
