What is SVG?

The HTML <svg> Element


The HTML <svg> element (introduced in HTML5) is known as a container for SVG graphics.

SVG has many methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

<svg> 4.0 9.0 3.0 3.2 10.1

SVG Circle



<!DOCTYPE html>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

Try it Yourself

SVG Rectangle


<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />

Try it Yourself

SVG Rounded Rectangle

Sorry, your browser does not support inline SVG.


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


Try it Yourself

SVG Star

Sorry, your browser does not support inline SVG.


<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /


Try it Yourself

SVG Logo

SVG Sorry, your browser does not support inline SVG.


<svg height="130" width="500">
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.

Try it Yourself

Differences Between SVG and Canvas


SVG is used to define a language that is used for describing 2D graphics in XML.

Canvas will be drawing 2D graphics, on the fly (with a JavaScript).

SVG is known to be XML based, which means that elements are available within the SVG DOM. You can also be attaching JavaScript event handlers for an element.

In SVG, each of the drawn shapes are remembered as an object. Incase attributes of an SVG object are modified, the browser will automatically re-render the shape.

Canvas is rendered as pixel by pixel. In canvas, as soon as the graphic is drawn, browser will forget it. If its position nees to be changed, the entire scene should be redrawn, which includes any objects that is already covered by the graphic.

Comparison of Canvas and SVG


The table below illustrates few important differences between Canvas and SVG:

Canvas SVG
  • They are resolution dependent
  • Do not support for event handlers
  • They have poor text rendering capabilities
  • You have the option to save the resulting image as .png or .jpg
  • Suitable for graphic-intensive games
  • They are resolution independent
  • Do not support for event handlers
  • Most suited for applications which has large rendering areas (Google Maps)
  • They are slow rendering if anything complex (anything that uses the DOM a lot will be slow)
  • They are not suitable for game applications

To study more about SVG, please go through our SVG Tutorial.