The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
Note: The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.
<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 Deprecated
The minimum SVG language profile that the document requires. Value type: <string> ; Default value: none; Animatable: no
contentScriptType Deprecated
The default scripting language used by the SVG fragment. Value type: <string> ; Default value: application/ecmascript; Animatable: no
contentStyleType Deprecated
The default style sheet language used by the SVG fragment. Value type: <string> ; Default value: text/css; Animatable: no
height
The displayed height of the rectangular viewport. (Not the height of its coordinate system.) 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 Deprecated
Which version of SVG is used for the inner content of the element. Value type: <number> ; Default value: none; Animatable: no
viewBox
The SVG viewport coordinates for the current SVG fragment. Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
The displayed width of the rectangular viewport. (Not the width of its coordinate system.) 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
Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties.
class, style
Most notably: requiredExtensions, systemLanguage
Global event attributes, Graphical event attributes, Document event attributes, Document element event 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-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
| Categories | Container element, Structural element |
|---|---|
| Permitted content | Any 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> |
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # NewDocument |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
svg |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
baseProfile |
Yes | ≤79 | No | No | Yes | No | Yes | Yes | No | No | No | Yes |
contentScriptType |
No | No | No | No | No | No | No | No | No | No | No | No |
contentStyleType |
No | No | No | No | No | No | No | No | No | No | No | No |
height |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
preserveAspectRatio |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
version |
Yes | ≤79 | No | No | Yes | No | Yes | Yes | No | No | No | Yes |
viewBox |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
width |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
x |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
y |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
zoomAndPan |
Yes | ≤79 | No | No | Yes | No | Yes | Yes | No | No | No | Yes |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg