<image>
Базовая поддержка Широко доступно *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
* Некоторые части этой функции могут поддерживаться на разных уровнях.
Элемент <image> SVG включает изображения в документы SVG. Он может отображать файлы растровых изображений или другие файлы SVG.
Единственные форматы изображений, которые должны поддерживать программы для работы с SVG, — это JPEG, PNG и другие файлы SVG. Поведение анимированных файлов GIF не определено.
Файлы SVG, отображаемые с помощью <image>, обрабатываются как изображения: внешние ресурсы не загружаются, стили :visited не применяются, и такие файлы не могут быть интерактивными. Чтобы включить динамические элементы SVG, попробуйте использовать <use> с внешним URL. Чтобы включить файлы SVG и запускать в них скрипты, попробуйте использовать <object> внутри <foreignObject>.
Примечание: Спецификация HTML определяет <image> как синоним <img> при разборе HTML. Этот конкретный элемент и его поведение применимы только внутри документов SVG или встроенного SVG.
Контекст использования
| Категории | Графический элемент, графический элемент со ссылкой, отображаемый элемент |
|---|---|
| Допустимое содержимое | Любое количество следующих элементов в произвольном порядке: Элементы анимации Описательные элементы <animate>, <animateMotion>, <animateTransform>, <discard>, <script>, <set>, <style>
|
Атрибуты
x-
Задаёт горизонтальное положение изображения относительно начала координат. Тип значения: <length> | <percentage>; Значение по умолчанию:
0; Анимируемый: да y-
Задаёт вертикальное положение изображения относительно начала координат. Тип значения: <length> | <percentage>; Значение по умолчанию:
0; Анимируемый: да width-
Ширина, в которой отображается изображение. В отличие от HTML-атрибута
<img>, этот атрибут является обязательным. Тип значения: <length> | <percentage>; Значение по умолчанию:auto; Анимируемый: да height-
Высота, в которой отображается изображение. В отличие от HTML-атрибута
<img>, этот атрибут является обязательным. Тип значения: <length> | <percentage>; Значение по умолчанию:auto; Анимируемый: да href-
Указывает URL файла изображения. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: нет
preserveAspectRatio-
Определяет способ масштабирования изображения. Тип значения: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; Значение по умолчанию:xMidYMid meet; Анимируемый: да crossorigin-
Определяет значение флага учётных данных для CORS-запросов. Тип значения: [
anonymous|use-credentials]?; Значение по умолчанию: нет; Анимируемый: да decoding-
Подсказывает браузеру, следует ли декодировать изображение синхронно или асинхронно. Тип значения:
async | sync | auto; Значение по умолчанию:auto; Анимируемый: да -
fetchpriorityЭкспериментальная Нестандартная -
Подсказывает относительный приоритет при загрузке внешнего изображения. Допустимые значения:
high-
Загружает внешнее изображение с высоким приоритетом относительно других внешних ресурсов.
low-
Загружает внешнее изображение с низким приоритетом относительно других внешних ресурсов.
auto-
Не задаёт предпочтительный приоритет загрузки. Используется, если значение не задано или недопустимо. Это значение по умолчанию.
-
xlink:hrefУстарело -
Указывает URL файла изображения. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: нет
Интерфейс DOM
Этот элемент реализует интерфейс SVGImageElement.
Пример
Простое отображение изображения PNG в SVG:
SVG
<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 | WebView для iOS | |
image |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
crossorigin |
118 | 118 | 114 | 104 | 17.2 | 118 | 114 | 79 | 17.2 | 25.0 | 118 | 17.2 |
decoding |
65 | 79 | 63 | 52 | Нет | 65 | 63 | 47 | Нет | 9.0 | 65 | Нет |
fetchpriority |
Нет | Нет | 140 | Нет | Нет | Нет | 140 | Нет | Нет | Нет | Нет | Нет |
height |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
href |
50 | 12 | 51 | 37 | 12.1 | 50 | 51 | 37 | 12.2 | 5.0 | 50 | 12.2 |
preserveAspectRatio |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
systemLanguage |
1 | 12 | 12 | 8 | 3 | 18 | 14 | 10.1 | 2 | 1.0 | 3 | 2 |
width |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
x |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
xlink_href |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
y |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
См. также
-
атрибут
fetchpriority
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image
