<svg>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

* Some parts of this feature may have varying levels of support.

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

Примечание:Атрибутxmlns требуется только для самого внешнего элементаsvg документов SVG. Это не нужно для внутренних элементовsvg или внутри документов HTML.

Пример

html,body,svg {  height: 100%;}

html

<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>

Атрибуты

baseProfileУстарело: The minimum SVG language profile that the document requires.Value type:<string> ;Default value: none;Animatable:no
contentScriptTypeУстарело: Язык сценариев по умолчанию, используемый фрагментом SVG.Value type:<string> ;Default value:application/ecmascript;Animatable:no
contentStyleTypeУстарело: Язык таблицы стилей по умолчанию, используемый фрагментом SVG.Value type:<string> ;Default value:text/css;Animatable:no
height: Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.)Value type:<length>|<percentage> ;Default value:auto;Animatable:yes
preserveAspectRatio: How thesvg fragment must be deformed if it is displayed with a different aspect ratio.Value type: (none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)? ;Default value:xMidYMid meet;Animatable:yes
versionУстарело: Какая версия SVG используется для внутреннего содержимого элемента.Value type:<number> ;Default value: none;Animatable:no
viewBox: Координаты области просмотра SVG для текущего фрагмента SVG.Value type:<list-of-numbers> ;Default value: none;Animatable:yes
width: Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.)Value type:<length>|<percentage> ;Default value:auto;Animatable:yes
x: The displayed x coordinate of the svg container. No effect on outermostsvg elements.Value type:<length>|<percentage> ;Default value:0;Animatable:yes
y: The displayed y coordinate of the svg container. No effect on outermostsvg elements.Value type:<length>|<percentage> ;Default value:0;Animatable:yes

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

Примечания по использованию

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

Разрешённый контент Любое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания
Элементы фигуры
Структурные элементы
Элементы градиента
<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>`