The svg
element is a container that defines a new coordinate system and viewport. It is used as the outermost element of any SVG document but it can also be used to embed a SVG fragment inside any SVG or HTML document.
Note: The xmlns
attribute is only required on the outermost svg
element of SVG documents.
<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
contentScriptType
Deprecated since SVG 2
application/ecmascript
; Animatable: no
contentStyleType
Deprecated since SVG 2
text/css
; Animatable: no
height
auto
; Animatable: yes
preserveAspectRatio
none
| xMinYMin
| xMidYMin
| xMaxYMin
| xMinYMid
| xMidYMid
| xMaxYMid
| xMinYMax
| xMidYMax
| xMaxYMax
) (meet
|slice
)? ; Default value: xMidYMid meet
; Animatable: yes
version
Deprecated since SVG 2
viewBox
width
auto
; Animatable: yes
x
svg
elements.0
; Animatable: yes
y
svg
elements.0
; Animatable: yes
Note: Starting with SVG2 x
, y
, width
, and height
are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
id
, tabindex
class
, style
requiredExtensions
, systemLanguage
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 | Status | Comment |
---|---|---|
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | Yes | 1.5 | 9 | 8 | 3 |
baseProfile
|
Yes | ? | ? | ? | ? | ? |
contentScriptType
|
No | ? | ? | ? | ? | ? |
contentStyleType
|
No | ? | ? | ? | ? | ? |
height |
1 | Yes | 1.5 | 9 | 8 | 3 |
preserveAspectRatio |
1 | Yes | 1.5 | 9 | 8 | 3 |
version
|
Yes | ? | ? | ? | ? | ? |
viewBox |
1 | Yes | 1.5 | 9 | 8 | 3 |
width |
1 | Yes | 1.5 | 9 | 8 | 3 |
x |
1 | Yes | 1.5 | 9 | 8 | 3 |
y |
1 | Yes | 1.5 | 9 | 8 | 3 |
zoomAndPan |
Yes | ? | ? | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 3 | Yes | Yes | 4 | Yes | 3 | ? |
baseProfile
|
Yes | Yes | ? | ? | ? | ? | ? |
contentScriptType
|
No | No | ? | ? | ? | ? | ? |
contentStyleType
|
No | No | ? | ? | ? | ? | ? |
height |
3 | Yes | Yes | 4 | Yes | 3 | ? |
preserveAspectRatio |
3 | Yes | Yes | 4 | Yes | 3 | ? |
version
|
Yes | Yes | ? | ? | ? | ? | ? |
viewBox |
3 | Yes | Yes | 4 | Yes | 3 | ? |
width |
3 | Yes | Yes | 4 | Yes | 3 | ? |
x |
3 | Yes | Yes | 4 | Yes | 3 | ? |
y |
3 | Yes | Yes | 4 | Yes | 3 | ? |
zoomAndPan |
Yes | Yes | ? | ? | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg