<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.
The <svg>
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, or inside HTML documents with XML serialization. It is unnecessary for inner svg
elements or inside HTML documents with HTML serialization.
Examples
Nested svg
element
This example shows that nested svg
elements do not need the xmlns
attribute.
<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>
Using dynamic viewport units
In this example, the height
and width
attributes on the svg
element are set using the dynamic viewport value 60vmin
, equivalent to 60% of the viewport's width or height, whichever is smaller.
<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='60vmin' width='60vmin'>
<rect x='0' y='0' width='50%' height='50%' fill='tomato' opacity='0.75' />
<rect x='25%' y='25%' width='50%' height='50%' fill='slategrey' opacity='0.75' />
<rect x='50%' y='50%' width='50%' height='50%' fill='olive' opacity='0.75' />
<rect x='0' y='0' width='100%' height='100%' stroke='cadetblue' stroke-width='0.5%' fill='none' />
</svg>
To change the iframe's dimensions try resizing the dotted red border from bottom right corner.
Attributes
baseProfile
Deprecated-
The minimum SVG language profile that the document requires. Value type: <string> ; Default value: none; 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.
Usage context
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> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # NewDocument |
Browser compatibility
BCD tables only load in the browser