SVG в HTML странице

SVG файлы можно внедрить в HTML документ с помощью следующих тегов: <embed>, <object> или <iframe>.

SVG в HTML странице

Ниже вы увидите три различных способа внедрения SVG файлов в HTML страницу.

Использование тега <embed>

Тег <embed> поддерживается всеми основными браузерами и позволяет использовать скрипты.

Комментарий:Использование тега <embed> для внедрения SVG в HTML страницу рекомендуется Adobe SVG Viewer! Однако, если вам нужно создать合法ный XHTML, то использовать тег <embed> нельзя. Тег <embed> не предусмотрен ни одним стандартом HTML.

Грамматика:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Комментарий:Атрибут pluginspage указывает на URL для загрузки плагина.

Использование тега <object>

Тег <object> является стандартным тегом HTML 4, поддерживаемым всеми новыми браузерами. Его недостаток в том, что он не позволяет использовать скрипты.

Комментарий:Если вы установили последнюю версию Adobe SVG Viewer, то SVG файлы не будут работать при использовании тега <object> (по крайней мере, не в IE)!

Грамматика:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Комментарий:Атрибут codebase указывает на URL для загрузки плагина.

Использование тега <iframe>

Тег <iframe> работает на большинстве браузеров.

Грамматика:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Я жду...

Если бы можно было просто добавить элементы SVG между собой, используя ссылку на пространство имен SVG в HTML-коде, это было бы замечательно, вот так:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>