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

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

Specification
Scalable Vector Graphics (SVG) 2
# NewDocument

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

BCD tables only load in the browser