<svg>

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

Примечание. Атрибут xmlns требуется только для самого внешнего элемента svg документов SVG. Это не нужно для внутренних элементов svg или внутри документов 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 Устарело SVG 2
The minimum SVG language profile that the document requires.
Value type: <string> ; Default value: none; Animatable: no
contentScriptType Устарело SVG 2
Язык сценариев по умолчанию, используемый фрагментом SVG.
Value type: <string> ; Default value: application/ecmascript; Animatable: no
contentStyleType Устарело SVG 2
Язык таблицы стилей по умолчанию, используемый фрагментом 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 2
Какая версия 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-свойств.

Глобальные атрибуты

Core Attributes
Most notably: id, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Event Attributes
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
Presentation Attributes
Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Aria атрибуты
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

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

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

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

Specification Status Comment
Scalable Vector Graphics (SVG) 2
Определение '<svg>' в этой спецификации.
Кандидат в рекомендации
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<svg>' в этой спецификации.
Рекомендация Initial definition

Кросс-браузерность

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
svgChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
baseProfile
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ≤79Firefox ? IE ? Opera Полная поддержка ДаSafari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
contentScriptType
Устаревшая
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox ? IE ? Opera Нет поддержки НетSafari ? WebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Нет поддержки Нет
contentStyleType
Устаревшая
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox ? IE ? Opera Нет поддержки НетSafari ? WebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Нет поддержки Нет
heightChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
preserveAspectRatioChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
version
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ≤79Firefox ? IE ? Opera Полная поддержка ДаSafari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
viewBoxChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
widthChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
xChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
yChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
zoomAndPan
УстаревшаяНестандартная
Chrome Полная поддержка ДаEdge Полная поддержка ≤79Firefox ? IE ? Opera Полная поддержка ДаSafari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах