SVG как изображение
Изображения SVG могут использоваться как формат изображения в ряде контекстов. Многие браузеры поддерживают изображения SVG:
- Элементы HTML
<img>
или<svg>
- CSS
background-image
Гекко-специфические контексты
Кроме того, Gecko 2.0 представил поддержку использования SVG (en-US) в следующих контекстах:
- CSS
list-style-image
- CSS
content
- Элементы SVG
<image>
- Элементы SVG
<feImage>
(en-US) - Функция Canvas
drawImage
Ограничения
В целях безопасности, Gecko накладывает некоторые ограничения на контент SVG, когда он используется в качестве изображения:
- JavaScript отключён.
- Внешние ресурсы (например, изображения, таблицы стилей) не могут быть загружены, хотя их можно использовать, если они встроены в данные: URI.
:visited
-стили ссылок не отображаются.- Стилизация виджитов на платформе (основанная на теме ОС) отключена.
Обратите внимание, что вышеуказанные ограничения являются специфическими для контекстов изображения; они не применяются, когда содержимое SVG просматривается напрямую или когда оно внедрено в виде документа с помощью встраивания элементов <iframe>
(en-US), <object>
(en-US), или <embed>
.
Спецификации
Specification | Status | Comment |
---|---|---|
HTML5 Определение 'SVG within <img> element' в этой спецификации. |
Рекомендация | Defines the usage of SVG within <img> elements. |
CSS Backgrounds and Borders Module Level 3 Определение 'SVG within 'background-image' CSS property' в этой спецификации. |
Кандидат в рекомендации | Defines the usage of SVG within the background-image property. |