Introduction
HTML5 is evolving becoming better and richer to help improve customer experiences. It creates an opportunity for web developers 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, circles, boxes, text and graphic images.
The following major internet browsers support SVG:
1. Internet Explorer 9+
2. Firefox 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
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 the client-side database.
- Used for improving 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 is scalable, provides the facility of the 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.