HTML5 Canvas vs SVG

, , …,

Here's a summary of differences of HTML5 Canvas and Scalable Vector Graphics (SVG).

What's the Difference Between Canvas and SVG

• Canvas is bitmap based, SVG is vector graphics tech. (this basically means, SVG graphics can be resized without getting fuzzy.)

• Canvas is just a bitmapped paint area. You use JavaScript to paint/draw things on it. That's all it can do for you. For example, once you've drawn a circle, you can't just say delete that circle. You have to draw something to cover up the circle. The circle isn't some object you can manipulate. It's just old paint on the wall. Everything in canvas is like this. Suppose if you want to know if user clicked on the circle. To do this, you have to calculate the click's coordinate, and you have to manually write code to check if the coordinate is in the circle. Suppose you want to move the circle, then you have to draw something to cover up the old circle, and draw the circle again somewhere else. Canvas is very low level. It's 1980s tech grafted onto the web.

• SVG is XML. Each graphics element you created can be scripted with JavaScript for interactivity as part of XML/CSS/DOM. ⁖ onclick, onmouseover, ….

• 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. ⁖ circle(center, radius)

• with Canvas, once a image is drawn, it's dead image, like paint on wall. With SVG, it's live: changes in code or object parameters are rendered in real-time.

• Canvas is relative new, part of HTML5. Canvas is invented by Apple in 2004 as proprietary tech, and is well supported in Apple's mobile devices. SVG is some 10 years old. All current browsers supports SVG, including IE9. (A light version of SVG is supported for years in mobile devices) Canvas is currently the hot topic due to HTML5.

• SVG also supports bitmapped images.

What's Canvas Good For?

Because Canvas is very primitive, so it's fast. It is suitable for bitmapped games, such as DOOM, Quake, where all you want to do is painting the screen. (but as of , there's no robust 3D graphics (WebGL) support yet)

For casual games, board games, interactive illustration, charts, SVG is much more powerful and 10 times less code.

Sample Animated SVG

Here's is a animated SVG.

soccer ball rotating
rotating soccer ball in SVG. img src

Works in all browsers as of .

SVG Tutorial

Here's a basic tutorial on scripting SVG. JavaScript: Scripting SVG, Basic Example.

Here's a fancy demo of SVG: JavaScript D3 Rotating Voronoi Demo.

Canvas Tutorial

Here's a very basic canvas tutorial. HTML5 Canvas Tutorial.

blog comments powered by Disqus