The HTML5 family of specifications provide two different models for vector graphics: canvas and SVG. Why have both? What is the difference between them, and how do you use them?
It’s important to start by understanding the difference between retained mode and an immediate mode graphics models:
More information on retained and immediate mode models can be found on MSDN.
SVG is a retained-mode graphics model. To build a scene graph in SVG, you write declarative markup to create an in-memory tree structure that lives in the HTML DOM. You can manipulate the scene graph through code or through CSS. SVG markup can be generated from a variety of tools, including Adobe Illustrator and Microsoft Visio.
Canvas is the immediate-mode graphics model. Because it doesn’t store the graph in memory, it takes less memory overhead to use, and can be faster for intensive use. Unlike SVG, it is programmatic in nature – there is only one parent <canvas> element, and code is used to populate it. While you draw primitive objects on a canvas, the only thing that is stored is the generated bitmap surface. In general, canvas is a lower-level API than SVG because of these constraints.
A quick tabular comparison of the two technologies:
Given these characteristics, what is the best technology to use for a specific scenario? SVG is perfect for high-fidelity documents and graphics for viewing and printing, and for interactive charts and maps. On the other hand, canvas is perfect for mathematically-intensive operations and complex scenes. However, there are a lot of cross-over scenarios where there’s no clear winner at this point in time, and as browsers evolve and improve, it seems that the performance characteristics of both technologies are starting to converge. Both technologies are clearly valuable!
[Session CD53 | presented by Patrick Dengler]
Thanks for helping me understand the differences between the two! I think its unclear which technology should be used where, especially in these early stages. Does Microsoft plan to offer tools that help us work with SVG and canvas? Perhaps with Expression?
@DYoder: You might want to check out MIX Online's free Adobe Illustrator to HTML5 Canvas plug-in called Ai->Canvas: visitmix.com/.../ai2canvas. It allows you to use Illustrator CS3, CS4, or CS5 on Mac or PC to export artwork to a canvas element (including animation). The tutorial also shows how to handle events and mouse interaction. It's not a full-featured solution, but it's one way to jump-start your canvas design/development.
What about WebGL?
Hmmm - a choice between immediate mode and retained mode. Now why didn't somebody think of that when you were architecting WPF for crying out loud?!?