SVG как изображение

SVG можно использовать в качестве формата изображений в HTML, CSS, некоторых элементах SVG и через Canvas API. На этой странице перечислены возможности, в которых можно указать SVG в качестве источника изображения.

Возможности с поддержкой SVG

Браузеры поддерживают изображения SVG в следующих элементах:

• элементах HTML <img> или <svg>
• свойстве CSS background-image
• свойстве CSS list-style-image
• свойстве CSS content
• элементе SVG <image>
• элементе SVG <feImage>
• функции Canvas drawImage

Ограничения

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

• JavaScript отключён.
• Внешние ресурсы (например, изображения и таблицы стилей) не могут быть загружены, однако их можно использовать, если они встроены с помощью data: URLs.
• Стили для ссылок :visited не отображаются.
• Стилизация виджетов с использованием платформенных средств (на основе темы ОС) отключена.

Обратите внимание, что перечисленные выше ограничения относятся только к контекстам изображений; они не применяются, если содержимое SVG просматривается напрямую или встроено в качестве документа с помощью элементов <iframe>, <object> или <embed>.

Спецификации