<svg>

Базовая поддержка Широко поддерживается *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она поддерживается браузерами с ⁨июля 2015⁩ года.

* Уровень поддержки некоторых частей этой функции может различаться.

Элемент <svg> SVG представляет собой контейнер, который задаёт новую систему координат и область просмотра. Он используется в качестве внешнего элемента документов SVG, но также может применяться для встраивания фрагмента SVG в документ SVG или HTML.

Примечание: Атрибут xmlns требуется только для внешнего элемента svg в документах SVG или внутри HTML-документов с XML-сериализацией. Для вложенных элементов svg и HTML-документов с HTML-сериализацией он не нужен.

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

Категории Элемент-контейнер, структурный элемент

Допустимое содержимое Любое количество следующих элементов в любом порядке:
Элементы анимации
Описательные элементы
Элементы фигур
Структурные элементы
Элементы градиента
<a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Категории	Элемент-контейнер, структурный элемент
Допустимое содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы Элементы фигур Структурные элементы Элементы градиента `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Атрибуты

baseProfile Устарело: Минимальный языковой профиль SVG, необходимый документу. Тип значения: <string>; Значение по умолчанию: нет; Анимируемый: нет
height: Отображаемая высота прямоугольной области просмотра (не высота её системы координат). Тип значения: <length> | <percentage>; Значение по умолчанию: auto; Анимируемый: да
preserveAspectRatio: Как должен быть деформирован фрагмент svg при отображении с другим соотношением сторон. Тип значения: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Значение по умолчанию: xMidYMid meet; Анимируемый: да
version Устарело: Версия SVG, используемая для внутреннего содержимого элемента. Тип значения: <number>; Значение по умолчанию: нет; Анимируемый: нет
viewBox: Координаты области просмотра SVG для текущего фрагмента SVG. Тип значения: <list-of-numbers>; Значение по умолчанию: нет; Анимируемый: да
width: Отображаемая ширина прямоугольной области просмотра (не ширина её системы координат). Тип значения: <length> | <percentage>; Значение по умолчанию: auto; Анимируемый: да
x: Отображаемая координата x контейнера svg. Не влияет на внешние элементы svg. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да
y: Отображаемая координата y контейнера svg. Не влияет на внешние элементы svg. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да

Примечание: Начиная с SVG2, x, y, width и height являются геометрическими свойствами, то есть эти атрибуты также можно использовать в качестве свойств CSS.

Интерфейс DOM

Этот элемент реализует интерфейс SVGSVGElement.

Примеры

Вложенный элемент `svg`

В этом примере показано, что вложенным элементам svg не требуется атрибут xmlns.

<svg
  viewBox="0 0 300 100"
  xmlns="http://www.w3.org/2000/svg"
  stroke="red"
  fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

Использование динамических единиц области просмотра

В этом примере атрибуты height и width элемента svg заданы с помощью динамического значения области просмотра 60vmin, которое соответствует 60% ширины или высоты области просмотра — в зависимости от того, какая из них меньше.

<svg
  viewBox="0 0 400 400"
  xmlns="http://www.w3.org/2000/svg"
  height="60vmin"
  width="60vmin">
  <rect x="0" y="0" width="50%" height="50%" fill="tomato" opacity="0.75" />
  <rect
    x="25%"
    y="25%"
    width="50%"
    height="50%"
    fill="slategrey"
    opacity="0.75" />
  <rect x="50%" y="50%" width="50%" height="50%" fill="olive" opacity="0.75" />
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    stroke="cadetblue"
    stroke-width="0.5%"
    fill="none" />
</svg>

Чтобы изменить размеры iframe, попробуйте перетащить пунктирную красную границу за нижний правый угол.

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # NewDocument>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`svg`	1	12	1.5	8	3	18	4	10.1	2	1.0	3	2
`baseProfile`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`height`	1	12	1.5	8	3	18	4	10.1	3	1.0	3	3
`preserveAspectRatio`	1	12	1.5	8	3	18	4	10.1	3	1.0	3	3
`systemLanguage`	1	12	12	≤12.1	3	18	14	≤12.1	2	1.0	3	2
`version`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`viewBox`	1	12	1.5	8	3	18	4	10.1	3	1.0	3	3
`width`	1	12	1.5	8	3	18	4	10.1	3	1.0	3	3
`x`	1	12	1.5	8	3	18	4	10.1	3	1.0	3	3
`y`	1	12	1.5	8	3	18	4	10.1	3	1.0	3	3
`zoomAndPan`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2

© 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/svg