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:
Here's is a animated SVG.
Works in all browsers as of .
Be sure to view source of the above SVG file. You can get a idea what SVG format is like.
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.
Have a look at the demos on its home page at: Source raphaeljs.com. They look pretty impressive.