HTML5 Canvas vs SVG
Perm url with updates: http://xahlee.org/js/html5_canvas_vs_SVG.html
HTML5 Canvas vs SVG
Xah Lee, 2010-12-22
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.))
- 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. Some 90% of SVG is supported in all browsers except IE8. (A light version of SVG is supported for years in mobile devices; while Canvas originated from Apple as proprietary tech, and is well supported in Apple's 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.
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.
Have a look at the demos on its home page at: http://raphaeljs.com/. They look pretty impressive.