<image>

Элемент <image> SVG включает изображения внутри документов SVG. Он может отображать файлы растровых изображений или другие файлы SVG. Растровые изображения.

Единственные форматы изображений, которые должны поддерживать программы SVG, это JPEG, PNG и другие файлы SVG. Анимация GIF имеет неопределённое поведение.

Файлы SVG, отображаемые с помощью <image>, обрабатываются как изображения: внешние ресурсы не загружаются, стили :visited не применяются, и они не могут быть интерактивными. Для включения динамических элементов SVG попробуйте использовать <use> с внешним URL-адресом. Чтобы включить файлы SVG и запустить скрипты внутри них, попробуйте использовать <object> внутри <foreignObject>.

Примечание: Спецификация HTML определяет <image> как синоним <img> при разборе HTML. Этот конкретный элемент и его поведение применяются только внутри документов SVG или встроенных SVG.

Контекст использования

Категории	Графический элемент, Элемент ссылки на графику
Разрешённое содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы

Атрибуты

x: Позиционирует изображение горизонтально от начала координат.
y: Позиционирует изображение вертикально от начала координат.
width: Ширина отображения изображения. В отличие от HTML <img>, этот атрибут обязателен.
height: Высота отображения изображения. В отличие от HTML <img>, этот атрибут обязателен.
href и xlink:href Устаревший : Указывает URL-адрес файла изображения.
preserveAspectRatio: Управляет масштабированием изображения.
crossorigin: Определяет значение флага аутентификации для запросов CORS.
decoding: Предлагает браузеру, должен ли он выполнять декодирование изображения синхронно или асинхронно.

Интерфейс DOM

<image> реализует интерфейс SVGImageElement.

Пример

Базовое отображение PNG-изображения в SVG:

SVG

html

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

Результат

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

Спецификация
Scalable Vector Graphics (SVG) 2 # ImageElement

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`image`	1	12	1.5	8	3	18	4	10.1	2	1.0	3
`crossorigin`	118	118	114	104	17.2	118	114	79	17.2	25.0	118
`decoding`	65	79	63	52	Нет	65	63	47	Нет	9.0	65
`height`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`href`	50	12	51	37	12.1	50	51	37	12.2	5.0	50
`preserveAspectRatio`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`systemLanguage`	1	12	12	8	3	18	14	10.1	2	1.0	3
`width`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`x`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`xlink_href`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`y`	1	79	1.5	15	3	18	4	14	2	1.0	4.4

© 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/Element/image