In HTML5 we can draw graphics using HTML elements instead of depending on images or third-party components like Flash.

There are the following two type of graphics elements:

  • Canvas
  • Scalable Vector Graphics (SVG)

Canvas Element

The <canvas> element:

  • helps the browser to draw shapes and images without any plugin.
  • is used to draw graphics, on the fly, via scripting.
  • has several methods for drawing paths, boxes, circles, characters and adding images.
The following is a sample of drawing a rectangle using a Canvas Element:
 
 
 
The following is a sample of drawing a circle using a Canvas Element:
 
 
 
 
 
Scalable Vector Graphics (SVG)
 
A <SVG> element:
  • is based on vector-based family of graphics.
  • defines graphics in XML Format.
  • creates graphics that does not lose any quality when zoomed or resized
The following is a sample of drawing a rectangle using a <SVG> Element:
 
 
 
The following is a sample of drawing a circle using a SVG Element:
 
 
 
 
Differences between Canvas and SVG elements
 

Canvas

SVG

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG defines the graphics in XML format.

Resolution dependent.

Resolution independent.

Canvas is rendered pixel by pixel.

In SVG, each drawn shape is remembered as an object.

Next Recommended Readings