Graphic Elements in HTML5

Introduction

 

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 an <SVG> Element:

 

 

The following is a sample of drawing a circle using an 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.

 

Conclusion

 

In this article, we studied Graphic Elements in HTML5.