Graphic Elements in HTML5

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.