What is the new Canvas tag in HTML5 all about? And why would I use it over SVG (scalable vector graphics)? I took a look and here’s what I found out:

SVG as we know has been around a few years although has not really found a firm foothold in the world of web development. I  didn’t realize but even IE6 supports SVG.  So why the slow adoption?

It seems the standard for SVG took a long time to get settled and performance is not great.  SVG is based on vectors so they zoom/scale really well without any pixelation. On the downside they manipulate the DOM so the browser’s memory and CPU requirements can become quite large.  What’s nice is you can save to SVG path format from a lot of drawing applications such as Illustrator.

The <canvas> tag is new in HTML5 and essentially is a bitmap that’s procedurally manipulated using javascript. It doesn’t create new elements in the DOM and is relatively faster than SVG as a result.  Graphics don’t zoom or scale as in SVG but I suppose you could simulate this behaviour since the image is procedural (built from instructions).

Boris Smus has a nice post comparing the performance of each : http://www.borismus.com/canvas-vs-svg-performance/

There are libraries to help you with each implementation, here’s a couple I found whilst researching graphs:

• RaphaelJS for SVG (recently acquired by Sencha (www.sencha.com) formerly ExtJS.com) and
• RGraph.net for <canvas> (www.rgraph.net)

So, which one to use? As always it depends on the need. I’m looking to replace OpenFlashChart currently with rGraph.net and give it a whirl. Flash is too heavy and slow for my simple graphing needs and I want to be buzzword compatible. SVG paths are a little funky, especially if I’m going to be manipulating them dynamically so I’ll go the HTML5 route.

Check with http://caniuse.com for browser compatibility and degrade with http://modernizr.com to tick the least number of users off.