HTML5 is evolving becoming better and richer to help improve customer experiences. It creates an opportunity for web developer to use standard-based web technologies to create graphically interactive sites and applications. HTML5 is helpful for designers because HTML5 tags are useful and easy to use instead of div tags. SVG and Canvas technologies can be used to address a range of graphic scenarios on the modern Web.
In HTML there are the following two types of graphics:
- Scalable Vector Graphics (SVG)
- Canvas
Scalable Vector Graphics (SVG)
SVG provides a big benefit; basically people are now using high-resolution devices (iPads and Monitors) so it is good that your designs, logos and charts can scale accordingly. The HTML tag <svg> is a container for SVG graphics. SVG is used for drawing paths, circle, boxes, text and graphic images.
The following major internet browsers support SVG:
1. Internet Explorer 9+
2. Fire fox 4+
3. Chrome 4+
4. Safari 4+
5. Opera 9.5
The following are the advantages of SVG:
- Text based.
- Vector technology.
- Uses XML and works within other language formats.
- Easily edited.
For example, now we are drawing a logo using <svg> tags.
![]()
Figure 1: SVG code
![]()
Figure 2: SVG Output
Canvas
A canvas is a rectangular area on an HTML page for drawing graphics on the fly via JavaScript. The default size of the canvas is 300 px × 150 px (width × height). The HTML tag <canvas> is a container for Canvas graphics.
The markup looks as in this:
- <canvas width="300" height="225"></canvas>
The following are the advantages of the canvas:
- Used for fulfilling the need of web application.
- Used for client-side database.
- Used for improving the accessibility.
- Geolocation support.
For example, now we are drawing a rectangle using <canvas> tags.
![]()
Figure 3: Canvas code
![]()
Figure 4: Canvas Output
Where To use Canvas and SVG
Canvas is procedural whereas SVG is declarative. Some reasons to consider SVG instead of canvas:
- SVG are scalable, provide the facility of auto scaling icon, logo and chart.
- SVG is not supported by languages whereas canvas elements are manipulated using client-side JavaScript.
- DOM handling. It's easy to attach event handlers and manipulate elements like you would for another HTML block. To move an item you simply change its coordinates but this is not true for a canvas.
I think this article provides you a good understanding of HTML5 graphics using the SVG and Canvas tags.