Brief comparison of HTML5 Canvas and SVG
This article offers a brief comparison of the pros and cons of HTML5 Canvas and SVG.
The main aspects of the technologies are compared in the following table.
|Initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004, powering applications like Dashboard widgets and the Safari browser.||An open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.|
|Resolution dependent. The shape drawn on the surface of Canvas consists of pixels (in other words, Canvas is in practice a bitmap image element with a drawing API). This makes Canvas best suited for generating bitmap graphics, editing images, and operations requiring pixel-level manipulation.||Resolution independent. As the name implies, SVG is used to define vector-based graphics. This makes SVG especially suitable for cross-platform user interfaces, as it allows scaling with no quality loss.|
|Immediate mode rendering. Client calls directly cause rendering of graphics objects to the display. The application must re-issue all drawing commands describing the entire scene each time a new frame is required, regardless of actual changes. The lack of an in-memory object model means that Canvas provides better performance when document complexity increases, but is poorly suited for user interfaces, as they typically need to be dynamic and interactive.||Retained mode rendering. Every SVG element becomes part of the DOM (Document Object Model). SVG enables associating event handlers with graphic objects. Client calls do not directly cause actual rendering, but instead update the in-memory object model; if attributes of an SVG object are changed, the browser can automatically re-render the scene.|
|No API for animation. Canvas can only be updated with timers and other events.||Good support for animations via scripting, CSS animations and SMIL (Synchronized Multimedia Integration Language).|
|Better performance when the number of drawn objects is high. ||Better performance with large rendering areas. |
|API does not support accessibility.||SVG markup and object model supports accessibility directly.|
Both technologies are supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and other WebKit base browsers, and Internet Explorer 9. Both are also supported in Nokia Browser 8.5.
- ↑ Canvas Specification Draft, http://dev.w3.org/html5/spec/the-canvas-element.html
- ↑ SVG Specification, http://www.w3.org/TR/SVG/
- ↑ 3.0 3.1 Performance of Canvas versus SVG, http://smus.com/canvas-vs-svg-performance
- ↑ CAKE - Canvas Animation Kit Experiment, http://code.google.com/p/cakejs/
- Graphics in HTML5, http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
- SVG or Canvas? Сhoosing between the two: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
- Thoughts on when to use Canvas and SVG: http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx