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.)
• The language of Canvas is low level and procedural, while SVG is declarative and higher level. In procedural style, you give commands to draw as if telling a paint brush where to move. In declarative style, you state your graphics shape and size.
// canvas. // draw some lines xx.beginPath(); xx.moveTo(9,9); // move point to xx.lineTo(20,20); // draw line to here xx.closePath(); xx.strokeStyle = "#ff0000"; // specify color xx.stroke(); // actually draw it
<!-- svg path element --> <path d="M 0 0 L 50 0 L 0 50 L 90 90" style="stroke:black; fill:yellow; stroke-width:5" />
• 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 to replace Flash, and is well supported in Apple's mobile devices. SVG started in 1999. All current browsers supports SVG, including IE9. (A light version of SVG is supported for years in mobile devices)
• 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 chart, map, interactive illustration, board game, SVG is much more suitable.
Sample Animated SVG
Here's is a animated SVG.
Works in all browsers as of .
Practical SVG Tutorial
- HTML Canvas Tutorial: Learn Canvas in 10 Minutes
- HTML5 Canvas Game Demo: Halma
- HTML5 Canvas Demo: Raycaster