HTML SVG



The HTML <svg> tag represents Scalable Vector Graphics.

What is SVG?

  • SVG stands for scalable vector graphics.
  • It basically defines vector-based graphics in XML format.
  • SVG graphics do NOT lose any quality if they are zoomed or resized.
  • Every element and every attribute in SVG files can be animated.

SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system, etc.

HTML <svg> Element

HTML5 allows embedding SVG directly using <svg> Tag

SVG Circle


<!DOCTYPE html>
<html>
  <body>
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="pink" />
    </svg>
  </body>
</html>

Output :

SVG Rectangle


<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="100">
        <rect width="400" height="100" style="fill:pink;stroke-width:4;stroke:rgb(0,0,0)" />
      </svg>
  </body>
</html>


SVG Rounded Rectangle


<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="180">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
        style="fill:pink;stroke:black;stroke-width:5;opacity:0.5" />
      </svg>
</html>


SVG Star


<!DOCTYPE html>
<html>
<body>
    <svg width="300" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:pink;stroke:darkblue;stroke-width:5;fill-rule:evenodd;" />
    </svg>
</html>


Differences Between SVG and Canvas

Canvas SVG
Resolution dependent Resolution Independent
No Support for event handlers Support for event handlers
Poor text rendering capabilities Best suited for applications with large rendering areas (Google Maps)
You can save the resulting image as .png or .jpg Slow rendering if complex 
Well suited for graphic-intensive games Not suited for game applications.