HTML5 Canvas vs SVG

Advertise Here For Profit

Xah Lee, 2010-12-22

Spent few hours looking at HTML5 Canvas and Scalable Vector Graphics (SVG).

My conclusion is: i won't touch HTML5 Canvas. Here's some highlights:

Canvas is bitmap based, SVG is vector graphics tech. (this basically means, SVG graphics can be resized without getting fuzzy. Suitable for clean line drawings, such as charts and illustrations. Canvas is more for photos, bitmapped video games. (If you are not familiar with the basics of advantage and disadvantages of bitmap vs vector graphics, see: Raster graphics and Vector graphics.))
SVG is XML. Each graphics element you created can be scripted with javascript for interactivity as part of XML/CSS/DOM. e.g. onclick, onmouseover.
The language of Canvas is low level and procedural, while SVG is declarative and higher level. (you can think of them as imperative lang vs functional lang) In procedural way, you give commands to draw as if telling a paint brush where to move. In declarative style, you state your graphics shape and size. e.g. 「circle(center, radius)」
with Canvas, once a image is drawn, it's dead image, like paint, part of the rendering. With SVG, it's live, changes to code changes rendering.
Canvas is relative new, part of HTML5. Support is spotty. Canvas originated from Apple as proprietary tech, and is well supported in Apple's mobile devices. SVG is some 10 years old. Some 90% of SVG is supported in all browsers except IE8. (A light version of SVG is supported for years in mobile devices) For practical considerations with respect to support, am thinking that SVG is slightly ahead, while Canvas is currently the hot topic due to html5.

Sample Animated SVG Graphics

Here's is a animated SVG you can view in your browser: soccer_ball_rotating.svg. (works in current versions Google Chrome (8.0.552.224), Opera (10.63), Safari (5.0.3), all on Windows. In Firefox (3.6.13), the soccer ball shows but does not rotate.) The source is from Source en.wikipedia.org

Be sure to view source of the above svg file. You can get a idea what svg format is like.

Use Inkscape to Learn and Create SVG

There's a wonderful vector graphics drawing tool Inkscape. I've been using it since few years ago. It is fantastic. I learned it quickly, and loved it. I have used Gimp much earlier, and have spend much more time with gimp, but find it rather more complex.

After you created a drawing in Inkscape and saved to a file, you can open the file in a text editor, and see the source code of the svg. This is a great way to learn about the svg format. You can create a simple circle and look at the file to see the svg syntax for that. Similarly, you can draw oval, square, path, text, color, fill, gradient, etc and view their syntax. Also, the tool lets you convert any bitmapped image to vector graphics.

For example, i've used Inkscape to create the following logos. The Emacs Logo ◇ Qi Language Logo ◇ LISP Logo ◇ Xah's Java Logo. You can view their svg source code.

Javascript Library for SVG

There are several js libraries that create SVG for you. So, you call js functions to create images, without needing to know anything about SVG. With such a library, you don't have to worry about SVG syntax or browser support problems.

One of the most popular js svg library seems to be Raphaël (JavaScript Library). Quote:

Raphaël is a JavaScript library that draws SVG graphics for web sites. It also provides a VML alternative for cross-browser compatibility. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Have a look at the demos on its home page at: http://raphaeljs.com/. They look pretty impressive.

✍