Как разместить SVG-графику на своей веб-странице

SVG или Scalable Vector Graphics позволяют рисовать намного более сложные изображения и отображать их на веб-страницах. Но вы не можете просто взять теги SVG и вставить их в свой HTML. Они не будут отображаться, и ваша страница будет недействительной. Вместо этого вы должны использовать один из трех методов.

Используйте тег объекта для встраивания SVG

HTML-тег будет вставлять SVG-изображение на вашу веб-страницу. Вы пишете тег объекта с атрибутом данных, чтобы определить файл SVG, который вы хотите открыть. Вы также должны включить атрибуты width и height, чтобы определить ширину и высоту вашего SVG-изображения (в пикселях).

Для кросс-браузерной совместимости вы должны включить атрибут type, который должен выглядеть следующим образом:

 type = "image/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 может отображаться некорректно, если вы не указали правильный тип контента (

     type = "image/svg + xml" 

    ), поэтому я не рекомендую опускать его.

  • Вы можете включить запасную информацию в тег

     object 

    для браузеров, которые не отображают файлы 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

  • Тег встраивания не является допустимым HTML4, но он является действительным HTML5, поэтому, если вы используете его на странице HTML4, вы должны помнить, что ваша страница не будет проверяться.
  • Используйте полное доменное имя в атрибуте src для лучшей совместимости.
  • Также есть сообщения о том, что использование тега embed с плагином Adobe приведет к сбою Mozilla версий от 1.0 до 1.4.

Посмотрите SVG в примере тега вставки.

Используйте iframe для включения SVG

iframes – еще один простой способ добавить изображение SVG на ваши веб-страницы. Для этого требуется только три атрибута: ширина и высота, как обычно, и src, указывающий на местоположение вашего SVG-файла.

Ваш iframe будет выглядеть так:

 

Советы по использованию iframe для SVG

Iframe будет отображаться с рамкой вокруг вашего изображения, если вы не удалите границу со стилем, таким как

 style = "border: none;" 

В iframe не указывается местоположение плагина, поэтому, если у браузера клиента нет плагина, он может вообще ничего не увидеть или может увидеть сообщение об ошибке.

Оцените статью
Solutics.ru
Добавить комментарий