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.
|
In this article, we studied Graphic Elements in HTML5.