Placing the Difference Between Canvas & SVG in the Limelight

Canvas

Canvas is a HTML element is used to draw graphics on a web page. It is a  bitmap with an“immediate mode” graphics application programming interface (API) for drawing on it. The <canvas> element is only a container for graphics. In order to draw the graphics, you are supposed to use a script. Canvas has several strategies when it comes to drawing paths, boxes, circles, text & adding images.

Browser Support for Canvas:-

Basic canvas example

Your browser does not support the HTML5 canvas tag. var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

The result :-

Advantages:-

1. Canvas is really interactive: It responds to user interactions by listening for any touch events, keywords and mouse
2. With Canvas, you always have the option of saving images as .png or .jpg
3. Any object that you draw on the canvas can be animated
4. Very efficient in dealing with multiple elements

Disadvantages:-

1. Canvas is dependent on resolution
2. Complex visualizations
3. It has Poor text rendering capabilities
4. It can be slow when drawing to large areas

Some great Canvas websites

run4tiger
1000.chromeexperiments
giantstepsmedias

Scalable Vector Graphics or SVG

SVG stands for ‘Scalable Vector Graphics’ and it is used to define graphics for the Web. SVG is mostly used for vector type diagrams like Two-dimensional graphs in an X, Y coordinate system, Pie charts etc. The HTML <svg> element is a container for SVG graphics. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG.

Browser Support for SVG:-

Basic SVG example:

The result :-

Advantages:-

1. It works perfectly with apps tagged with large rendering areas like Google Maps.
2. The source files related to SVGs are relatively smaller and hence its loads faster and utilizes less bandwidth when compared to its competitors.
3. Support for event handlers
4. Resolution independent
5. SVG graphics are developed using mathematical formulas, which require far less data to be  stored in the source file because you don’t have to store the data for each individual pixel.

Disadvantages:-

1. SVG is not suited for game applications
2. Slow rendering when document complexity increases.

Some great SVG websites:

santatracker.google
hell-o-baby

To summarize, the integration of SVG into the DOM attributes to its slower rendering with complex documents.  Hence, SVG is not considered ideal for dynamic applications like games. The Canvas is tagged with poor text rendering capability, lack of animation, as well as mediocre accessibility support. I have tried to weigh SVG and Canvas in the best manner possible and hopefully, you guys found this blog interesting.

Know More About This Topic from our Techies