SVG vs. Canvas: Tastes Great, or Less Filling?

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.

Canvas Tag

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
page, and it's your job to color all the pixels using javascript. It's
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 javascript emulator
    but that was just an experiment and not a real project

Here are some cool demos using the canvas tag:

SVG

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:

Here are some cool demos using SVG:

Conclusions

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.

Feature SVG Canvas Draw geometric shapes Easy: use SVG tags Easy: use API Manipulate pictures Hard: Need to use poorly- or un-implemented image/feImage tags Easy: use API Object Model Easy: You declare model, browser renders it. Model is part of DOM. Hard: No model. You can maintain your own Javascript model (fun!). User interaction Easy: Event model is integrated Hard: None out of the box - you have to implement all event handling infrastructure, like tracking coordinates of objects in model. Resizing Easy: that's the S in Scalable Medium: You write the resizing code

You should know which technology to use based on your project and requirements.
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 canvas 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.

Comments

comments powered by Disqus