<svg>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Элемент 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 the svg 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 outermost svg elements. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
y: The displayed y coordinate of the svg container. No effect on outermost svg elements. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

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

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

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

Разрешённый контент Любое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания
Элементы фигуры
Структурные элементы
Элементы градиента
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

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

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

Specification
Scalable Vector Graphics (SVG) 2 # NewDocument

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

BCD tables only load in the browser