Содержание
SVG или Scalable Vector Graphics позволяют рисовать намного более сложные изображения и отображать их на веб-страницах. Но вы не можете просто взять теги 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 в примере тега объекта.
Embed 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
- Тег встраивания не является допустимым HTML4, но он является действительным HTML5, поэтому, если вы используете его на странице HTML4, вы должны помнить, что ваша страница не будет проверяться.
- Используйте полное доменное имя в атрибуте src для лучшей совместимости.
- Также есть сообщения о том, что использование тега embed с плагином Adobe приведет к сбою Mozilla версий от 1.0 до 1.4.
Посмотрите SVG в примере тега вставки.
Используйте iframe для включения SVG
iframes — еще один простой способ добавить изображение SVG на ваши веб-страницы. Для этого требуется только три атрибута: ширина и высота, как обычно, и src, указывающий на местоположение вашего SVG-файла.
Ваш iframe будет выглядеть так:
Советы по использованию iframe для SVG
Iframe будет отображаться с рамкой вокруг вашего изображения, если вы не удалите границу со стилем, таким как
стиль = «границы: нет;»
В iframe не указывается местоположение плагина, поэтому, если у браузера клиента нет плагина, он может вообще ничего не увидеть или может увидеть сообщение об ошибке.
