HTML SVG

SVG stands for Scalable Vector Graphics.  It is a graphic format that represents images as vectors.  The advantage of vector graphics is that it is small and scalable.

HTML Tutorial

Example

An <svg> element with several svg line elements.

<svg width="400" height="220">
  <line x1="10" y1="10"  x2="10"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="30"  x2="30"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="50"  x2="50"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="70"  x2="70"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="90"  x2="90"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="110" x2="110" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="130" x2="130" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="150" x2="150" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="170" x2="170" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="190" x2="190" y2="200" style="stroke:red;stroke-width:1" />
</svg>

SVG is scalable. What does that mean?

When an image is scalable, it means it can be resized without pixelation or loss of detail

An SVG image can be enlarged without loss of quality.

You can zoom in as much as you want and the SVG image remains crisp and clear.

After scaling the PNG image is pixelated, whereas SVG is crisp.


Using SVG

The <svg> tag creates an SVG container with a specified width and height.

Inside the <svg> tag add special SVG tags for drawing shapes, texts, and graphics.

SVG images are much smaller than other image file formats like PNG, JPG, and GIF..


Drawing a circle in SVG

Using a <circle> SVG tag to draw and style a circle.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#333" 
          stroke-width="2" fill="lightblue" />
</svg>

Drawing a rectangle in SVG

Using a <rect> SVG tag to draw and style a rectangle.

<svg width="100" height="100">
  <rect width="100" height="100" 
        style="fill:lightblue;stroke:#333;stroke-width:4;" />
</svg>

Drawing a polygon in SVG

Using a <polygon> SVG tag to draw and style an arbitrary shape.

<svg width="100" height="100">
  <polygon points="5,37 50,5 95,37 20,99 80,99" 
           style="fill:lightblue;stroke:#333;stroke-width:2;fill-rule:evenodd;" />
</svg>

SVG versus Canvas

SVG

  • SVG is natively used for scalable 2D graphics.
  • SVG is XML based, which means each element is created using SVG DOM.
  • Each drawn shape is remembered as an object. Once an object changes, the browser re-renders the shape.

Canvas

  • Canvas uses Javascript to draw 2D graphics.
  • Once it's drawn, the browser will forget about it afterwards.
  • If something in the image changes, then JavaScript needs to redraw the entire scene.

Did you know?

Did you know?

You can create animations using SVG

With the help of CSS, you can create animations in SVG.
SVG even allows embedded stylesheets inside the <sgv> tag.

Animation of an svg circle sliding into view.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#333" 
          stroke-width="2" fill="lightblue" class="circle" />
  <style>
   .circle {
      animation-name: circleOrigin;
      animation-duration: 2s;
      animation-iteration-count: infinite;
   }
   @keyframes circleOrigin {
      from { transform: rotate(270deg); }
      to   { transform: rotate(360deg); }
   }
  </style>
</svg>

Browser Support

This table lists when <svg> support started for each browser:

Chrome
4.0 Jan 2010
Firefox
2.0 Oct 2006
IE/Edge
9.0 Mar 2011
Opera
10.0 Aug 2009
Safari
3.1 Mar 2008

You may also like

Guides