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)

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: 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:
  1. <canvas width="300" height="225"></canvas>
The following are the advantages of the canvas:
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: I think this article provides you a good understanding of HTML5 graphics using the SVG and Canvas tags.