Now that there are two up-and-coming web graphics technologies (SVG and
canvas), I thought I'd research them,
see what's the difference between them, and see if they're usable now.
The canvas tag got a lot of attention a while back when Apple announced
they were adding it to their Safari browser,
and that they were using it to implement some of their Dashboard widgets.
What is it? Basically, the canvas tag is an "immediate mode" graphics technology -- you start with an empty image jammed into your browser
going to be a "standard" by the WHATWG.
Below is a summary of current browser support for the canvas tag:
- Firefox: 1.5 is first major Firefox release with it built-in
- Safari: version 2 has it
- Opera: 9 preview has it, will be in next major release
- IE: of course it doesn't support it. someone tried writing a small
but that was just an experiment and not a real project
Here are some cool demos using the canvas tag:
- Doom-like demo
- Make image
( how it works )
- L-Systems, some look like fractals
- Free-hand drawing
SVG, or Scalable Vector Graphics, was made a standard by the W3C years
ago (v1.0 in 2001 and v1.1 in 2003).
For a while it looked like just another W3C party where no one showed up.
What is it? It's a "retained mode" graphics technology where you declare your graphical model as a tree of objects,
and the browser takes care of rendering it for you. Since the browser has your model, it can do lots of things for you like detect mouse clicks on objects and
rescale your picture to an arbitrary resolution.
Below is a summary of current browser support for SVG:
- Firefox: 1.5 is first major Firefox release with
( summary of 1.5 features )
- Safari: currently in nightly builds, targeted for next release
- Opera: Opera 8 supports the important subset SVG 1.1 Tiny
- IE: of course it doesn't support it directly, but you can use the free Adobe plugin
Here are some cool demos using SVG:
I took a graphics class in college a decade and a half ago, and the
concepts remain exactly the same.
In general, SVG and canvas are complimentary, rather than competing, technologies. Anything you can do in one,
you can do in the other, but each one is optimized for certain situations.
Below, I put together a table summarizing the tradeoffs.
You should know which technology to use based on your project and
If you're just rendering some graphics, and you have no need for user interactivity, then the canvas tag is more appropriate.
If you want to have user interactivity, or if you have some other need for a model or user interaction, then SVG is more appropriate.
Ignoring the above trade-offs, if you want a technology that runs in all
major browsers right now, then you have to go with SVG.
And that's probably good, because my completely unscientific guess is that SVG is more appropriate for most (but not all!) applications.
Bottom line: SVG tastes great, but canvas is less filling.
P.S. Just for fun, I generated a GANTT chart using SVG and
to show how to write simple stuff
(if you have IE, don't even try that link. :-). I learned that for basic stuff, the APIs are quite similar. I also learned that
embedding SVG in HTML is a pain in the butt, which is why I put it in a separate page here.