HTML <svg> (Scalable Vector Graphics) Tag
Example
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="tomato" stroke-width="2" fill="black" />
</svg>Meaning
The <svg> element is used to embed SVG graphics in an HTML document.
The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional vector based graphics for the web.
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.
Version: HTML5
Standard Syntax
<svg>...</svg>Browser Support
Status
Attributes
| Attribute | Value | Default | Animatable | Description |
|---|---|---|---|---|
| height | length|percentage | auto | Yes | The displayed height of the rectangular viewport. (Not the height of its coordinate system.) |
| preserveAspectRatio | (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? | xMidYMid meet | Yes | How the svg fragment must be deformed if it is displayed with a different aspect ratio. |
| viewBox | list-of-numbers | none | Yes | The SVG viewport coordinates for the current SVG fragment. |
| width | length|percentage | auto | Yes | The displayed width of the rectangular viewport. (Not the width of its coordinate system.) |
| x | length|percentage | auto | Yes | The displayed x coordinate of the svg container. No effect on outermost svg elements. |
| y | length|percentage | auto | Yes | The displayed y coordinate of the svg container. No effect on outermost svg elements. |
Global Attributes
The <svg> element also supports the Global Attributes in HTML.
Event Attributes
The <svg> element also supports the Event Attributes in HTML.
By Default CSS Value(s)
Most of the browsers will display the <svg> element with the following by default value(s)
svg {
display: inline;
height: 150px;
width: 300px;
}