HTML <svg> Tag

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.

HTML Tag

Example

#

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.

Alaska Hawaii Alabama Arkansas Arizona California Colorado Connecticut Delaware Florida Georgia Iowa Idaho Illinois Indiana Kansas Kentucky Louisiana Massachusetts Maryland Maine Michigan Minnesota Missouri Mississippi Montana North Carolina North Dakota Nebraska New Hampshire New Jersey New Mexico Nevada New York Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Virginia Vermont Washington Wisconsin West Virginia Wyoming District of Columbia
<svg viewBox="0 0 950 650">
   ... to see the shapes and paths click the Try It live button ...
</svg">    
svg = scalable vector graphics

Using <svg>

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.

More Examples

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.

Circle

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>

Rectangle

A rectangle created with a <rect> SVG tag.

<svg width="300" height="100">
  <rect width="300" height="100" fill="orangered" />
</svg>

Line

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>

Path

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>

Advanced

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>

Attributes for <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.


Obsolete Attributes

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

Did you know?

Did you know?

Difference between <svg> and <canvas>

Both <svg> and <canvas> are used to create graphics.

The <svg> element is composed of shapes like circle, rect, line, etc, much like XML.

The <canvas> element is very different -- it draws graphics using JavaScript.

In short: <svg> is infinitely scalable, but <canvas> is faster.

To see what is possible with <svg> follow this link to codepen.io.


Media Tags

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, these tags 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

Browser support

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

You may also like

Guides