SVG в качестве изображения

Изображения SVG могут использоваться как формат изображений в различных контекстах. Браузеры поддерживают изображения SVG в:

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

Ограничения

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

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

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

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

Спецификация
CSS Backgrounds and Borders Module Level 3 # the-background-image

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image