Внедрение SVG в HTML

Автор: Евгений Рыжков Дата публикации:

Задача

Отобразить SVG-изображение на HTML-странице.

Существует несколько способов это сделать, но не все из них кроссбраузерны.

SVG через iframe

<iframe src="path-to/my-pic.svg" width="300" height="100"></iframe>

Наличие фрейма для многих уже ставит крест на данном способе. Нынче есть более совершенные способы решения данной задачи. К тому же в таком виде не получится реализовать прозрачные изображения (фрейм имеет фон), а так же нет доступа из внешних скриптов к элементам рисунка.

SVG через object

<object type="image/svg+xml" data="path-to/my-pic.svg">
	Ваш браузер не поддерживает формат SVG
</object>

Имеем: валидный чистый код, альтернативный текст, где можно снабдить пользователя инструкцией, что делать, если он не видит картинки (например, отправить на сайт нормального браузера или дать ссылку на плагин, установка которого ему поможет). Такое внедрение поддерживает прозрачность в SVG изображении (правда в IE тут проблема: прозрачные участки будут залиты белым). Из минусов: нет возможности влиять на изображения внешними скриптами (из HTML), только теми, которые находятся в самом SVG-файле.

Метод хорош для фоновых изображений или каких либо статичных картинок.

SVG через embed

<embed type="image/svg+xml" src="path-to/my-pic.svg" pluginpage="" height="100" width="100">
</embed>

Такой способ якобы позволяет взаимодействовать скриптам в HTML с содержимым SVG-файла (мне пока такого добиться не удалось). Для IE тег <embed> имеет атрибут wmode (<embed wmode="transparent"...>), который поможет корректно отобразить прозрачные участки SVG-изображения. Атрибут pluginpage должен отправить пользователя, браузер которого не поддерживает SVG, на страницу плагина, который ему поможет. В реальности в чистом виде толку о этого атрибута ноль. Именно такой вариант рекомендует Adobe для корректной работы из SVG Viewer. Такой способ валидацию не пройдет.

Этот способ сейчас пользуется большой популярностью.

SVG в HTML коде

<?xml version="1.0"?>
<html xmlns="" xmlns:svg="">
<head>
      <title>XHTML + SVG </title>
</head>
<body>
     <svg:svg width="4cm" height="8cm" version="1.1">
         <svg:ellipse cx="2" cy="4" rx="2" ry="1" />
     </svg:svg>
  </body>
</html>

следует обратить внимание на используемое пространство имен: xmlns:svg="">;
документ должен быть именно в xhtml формате (локально — это файл с расширением .xhtml)
с кроссбраузерностью у этого метода плохо. Особенно плоха реакция IE;
html код становится нереально грязным.

Сейчас этот метод лучше не использовать.

Заметка

IE, включая версии 8, не поддерживает SVG. В то время Microsoft активно продвигал свой формат — VML. Потому с этим браузером придется повозиться, чтобы увидеть и там SVG-изображение (об этом подробней в следующих статьях).

Светлое будущее

По видимому в скором будущем формат SVG основательно войдет в жизнь веб разработчиков. В подтверждение этому уже сейчас можно встретить описания интересных способов внедрения SVG. По заявлениям разработчиков браузеров, новые версии их творений будут поддерживать часть или все из ниже приведенных способов интеграции SVG:

SVG в background-image

background-image: url(path-to/my-pic.svg);

SVG в img

<img src="path-to/my-pic.svg" alt="картинка на SVG" />

SVG в favicon

<link rel="icon" type="image/svg+xml" href="favicon.svg" />

SVG шрифты

@font-face { 
  font-family: svgFont; 
  src: url(svgfont.svg) format("svg");
}

Что имеем

Хоть SVG как формат очень старый (версия 1.1 была готова еще году), чтобы его реально использовать нужно изрядно попотеть. Но разве было бы интересно работать, если бы было все просто?..

Материалы

Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
К вопросу о кроссбраузерном использовании SVG
Вставка SVG рисунков в HTML – страницы

Xiper