HTML <svg> Element
The HTML <svg> element embeds Scalable Vector Graphics (SVG) directly within an HTML document, allowing graphics to remain sharp when resized.
Syntax
<svg width="200" height="120" viewBox="0 0 200 120">
<circle cx="100" cy="60" r="50" fill="blue"></circle>
</svg>The <svg> element requires both an opening and closing tag. SVG elements such as <circle>, <rect>, <line>, and <path> can be placed inside it to create vector graphics.
Attributes
The <svg> element supports applicable global HTML attributes as well as attributes defined by SVG. Common attributes include:
| Attribute | Description |
|---|---|
width |
Specifies the displayed width of the SVG viewport. |
height |
Specifies the displayed height of the SVG viewport. |
viewBox |
Defines the position and dimensions of the SVG's internal coordinate system, allowing the graphic to scale within its viewport. |
preserveAspectRatio |
Controls how the SVG is scaled and positioned when the viewport and viewBox use different aspect ratios. |
Example
This example creates a simple graphic using a rectangle, circle, and line inside an inline <svg> element.
Usage Notes
SVG is a vector graphics format. Unlike raster images made from a fixed grid of pixels, vector graphics describe shapes and paths mathematically, allowing them to be enlarged or reduced while remaining sharp.
An inline <svg> element can contain SVG shapes, paths, text, gradients, and other SVG elements directly within the HTML document.
The viewBox attribute is especially useful for responsive SVG graphics. It establishes an internal coordinate system that allows the graphic to scale while preserving the relationship between its elements.
Inline SVG can be styled with CSS, and individual SVG elements can be targeted with classes and other selectors. Properties such as fill, stroke, and stroke-width can control the appearance of SVG shapes.
SVG graphics can also be stored in separate .svg files and displayed as external images. Inline SVG is useful when the individual parts of a graphic need to be styled or manipulated as part of the document.
Accessibility
When an SVG communicates meaningful information, provide an accessible description of the graphic. A <title> element inside the SVG can provide a short accessible name, while more detailed information may require surrounding text or another appropriate description.
Decorative SVG graphics should not add unnecessary information for assistive technologies. Depending on how the graphic is used, decorative SVG content can be hidden from the accessibility tree with aria-hidden="true".
Do not rely only on color within an SVG to communicate important information. Use labels, shapes, patterns, text, or other visual differences when users need to distinguish between parts of a graphic.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: SVG in HTML .
Related Elements
The <svg> element is related to the <img> element for displaying external images and the <canvas> element for drawing graphics using scripting.