Елементът svg е контейнер, който задава нова координатна система и viewport. Използва се като най-външен елемент за всеки един SVG документ. Също така може да бъде използван за влагане на  отделен фрагмен от SVG (Мащабируема векторна графика) в SVG или HTML документ.

Бележка: Атрибутът xmlns се изисква само на най-външния  svg елемент от SVG документите.

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

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

Атрибути

baseProfile Deprecated since SVG 2
Този атрибут задава минималният SVG езиков профил, необходим от документа.
Тип на стойността: <string> ; Стойност по подразбиране: none; Animatable: no
contentScriptType Deprecated since SVG 2
Този атрибут определя скриптовият език, който по подразбиране се използва от този SVG фрагмент.
Тип на стойността: <string> ; Стойност по подразбиране: application/ecmascript; Animatable: no
contentStyleType Deprecated since SVG 2
Този атрибут задава езикът, който по подразбиране се използва за стилизиране на SVG фрагмента.
Value type: <string> ; Default value: text/css; Animatable: no
height
Атрибутът определя височината на фигурата rect (от правоъгълник).
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
preserveAspectRatio
Този атрибут задава как графичният фрагмент трябва да бъде деформиран, ако е вложен в контейнер с различно съотношение.
Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
version Deprecated since SVG 2
Атрибутът показва коя версия на SVG се използва за вътрешното съдържание на елемента.
Value type: <number> ; Default value: none; Animatable: no
viewBox
Атрибутът определя границата на SVG viewport за настоящия SVG фрагмент.
Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
Атрибутът определя широчината на фигурата rect (от правоъгълник).
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
x
Атрибутът определя стойността на х координатата на svg контейнера. Няма ефект върху най-външния  svg елемент.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
y
Този атрибут определя стойността на y координатата на svg контейнера. Няма ефект върху най-външния  svg елемент.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Бележка: След SVG2 x, y, width и height са Geometry Properties (Геометрични Свойства), което означава, че тези атрибути могат да бъдат използвани и като  CSS свойства за този елемент.

Глобални атрибути

Основни атрибути
Най-съществените: id, tabindex
Атрибути за стилизиране
class, style
Атрибути за обработване на условията
Най-съществени: requiredExtensions, systemLanguage
Атрибути за събития (еvent)
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
Атрибути за представяне
Най-съществени: 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

Бележки за използване

CategoriesContainer element, Structural element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

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

Спецификация Статут Коментар
Scalable Vector Graphics (SVG) 2
The definition of '<svg>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<svg>' in that specification.
Recommendation Initial definition

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
baseProfile
Deprecated
Chrome Full support YesEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentScriptType
Deprecated
Chrome No support NoEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentStyleType
Deprecated
Chrome No support NoEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
heightChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
preserveAspectRatioChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
version
Deprecated
Chrome Full support YesEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
viewBoxChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
widthChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
xChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
yChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
zoomAndPanChrome Full support YesEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Етикети за документа и сътрудници

Допринесли за тази страница: petya5q2
Последно обновяване от: petya5q2,