The <svg> tag serves as a container for SVG graphics.
SVG stands for Scalable Vector Graphics.
SVG images are lightweight and scalable without loss of resolution or pixelation.
An <svg> element of a map of the USA and its 50 states.
Hover over any state to see a tooltip with the state's name.
<svg viewBox="0 0 950 650"> ... to see the shapes and paths click the Try It live button ... </svg">
svg
= scalable vector graphics
The <svg> tag creates a container for SVG graphics.
SVG can be used to draw 2D graphics like shapes, paths, text, and images.
Shapes are special SVG elements, such as <circle>
, <rect>
, and <line>
.
SVG images are very much like XML which can be created by any text editor.
However, it's easier to create SVG images with a drawing tool like Adobe Illustrator or Inkscape.
An SVG image contains special SVG tags that draw different shapes, text, and graphics. Let's review some of these special tags.
Note: To cover all the details of creating SVG images would require a complete tutorial. This overview shows some of the basics.
A circle created with a <circle>
SVG tag.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="steelblue"
stroke-width="2" fill="lightblue" />
</svg>
A rectangle created with a <rect>
SVG tag.
<svg width="300" height="100">
<rect width="300" height="100" fill="orangered" />
</svg>
A playful sketch created with several <line>
SVG tags.
<svg width="400" height="220">
<line x1="10" y1="10" x2="200" y2="10" style="stroke:black;stroke-width:1" />
<line x1="30" y1="10" x2="200" y2="30" style="stroke:black;stroke-width:1" />
<line x1="50" y1="10" x2="200" y2="50" style="stroke:black;stroke-width:1" />
<line x1="70" y1="10" x2="200" y2="70" style="stroke:black;stroke-width:1" />
<line x1="90" y1="10" x2="200" y2="90" style="stroke:black;stroke-width:1" />
<line x1="110" y1="10" x2="200" y2="110" style="stroke:black;stroke-width:1" />
<line x1="130" y1="10" x2="200" y2="130" style="stroke:black;stroke-width:1" />
<line x1="150" y1="10" x2="200" y2="150" style="stroke:black;stroke-width:1" />
<line x1="170" y1="10" x2="200" y2="170" style="stroke:black;stroke-width:1" />
<line x1="190" y1="10" x2="200" y2="190" style="stroke:black;stroke-width:1" />
</svg>
A red heart created with a <path>
SVG tag.
<svg width="100" height="100">
<path d="M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z"
fill="orangered" stroke="#333"/>
</svg>
A clock drawn with different SVG tags.
<svg viewBox="0 0 100 100" width="200" height="200">
<g transform="translate(50,50)">
<path d="M38,-1h12v2h-12zM-38-1h-12v2h12z"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(30)"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(60)"/>
<path d="M38,-1h12v2h-12zM-38-1h-12v2h12z" transform="rotate(90)"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(120)"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(150)"/>
<path d="M-0.5,0v-35h1v35z"/>
<path d="M0,-0.75h30v1.5h-30z"/>
<path d="M0,-0.75h30v1.5h-30z" transform="rotate(-30)" fill="#888"/>
<circle r="2"/>
</g>
</svg>
This table lists the <svg> tag attributes.
Attribute | Value | Description |
---|---|---|
viewBox | list-of-numbers | Sets viewport coordinates for SVG image. |
width | pixels | SVG image width in pixels. |
height | pixels | SVG image height in pixels. |
id | identifier | Defines a unique identifier for the svg element. |
class | classnames | Sets one or more CSS classes to be applied to the svg tag. |
style | CSS-styles | Sets the style for the svg element. |
data-* | value | Defines additional data that can be used by JavaScript. |
hidden | hidden | Specifies whether the svg element is hidden. |
title | text | Sets a title that displays as a tooltip. |
preserveAspectRatio | none xMinYMin xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax |
Sets deformation of the SVG image with different aspect ratio. |
For additional global attributes see our global attributes list.
Do not use the attributes listed below. They are no longer valid on the svg element in SVG3.
Attribute | Description | Alternative |
---|---|---|
baseProfile |
The min SVG language profile that the page requires. | n/a |
contentScriptType |
The default scripting language used by the SVG image. | n/a |
contentStyleType |
The default style sheet language used by the SVG image. | n/a |
version |
The SVG version used in the container. | n/a |
To see what is possible with <svg> follow this link to codepen.io.
The <svg> tag is part of a group of tags
that create multi-media experiences on the web.
This group is referred to as the Media tag group.
Together, they allow you to create powerful multi-media solutions.
Here is a list of media tags.
Element | Description |
---|---|
<audio> | Creates a player for sound such as music, sound effects, or others |
<video> | Creates a video player on a page |
<source> | Adds a media source for a <video>, <audio>, or <picture> |
<track> | Adds a text track, such as, subtitles and captions, to the media |
<embed> | Creates a container for an external resource |
<iframe> | Creates a frame in which another web page can be embedded |
<svg> | Displays an scalable vector image |
<canvas> | Creates a graphics container where JavaScript can draw |
<img> | Displays an image |
<area> | Specifies a map area for an image |
<map> | Defines a client-side image map, i.e. an image with clickable areas |
<figure> | Displays self-contained content, usually an image |
<figcaption> | Adds a caption to a <figure> (image) element |
Here is when <svg> support started for each browser:
Chrome
|
4.0 | Jan 2010 |
Firefox
|
3.0 | Jun 2008 |
IE/Edge
|
9.0 | Mar 2011 |
Opera
|
10.1 | Jun 2010 |
Safari
|
3.2 | Nov 2008 |