Brief comparison of HTML5 Canvas and SVG
This article offers a brief comparison of the pros and cons of HTML5 Canvas and SVG.
Article Metadata
Article
Contents |
Introduction
Both HTML5 Canvas and SVG (Scalable Vector Graphics) are web technologies that allow the creation of rich graphics inside the browser. HTML5 Canvas is a versatile JavaScript API (Application Programming Interface) which allows programmatic rendering of bitmap images. [1] SVG is an XML-based file format for describing two-dimensional vector graphics. [2] Due to their different nature, each technology should be used with consideration of its strong and weak points.
Comparison
The main aspects of the technologies are compared in the following table.
| HTML5 Canvas | SVG |
|---|---|
| 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. |
| Based on JavaScript. Cannot operate when JavaScript is disabled. Canvas images can only be built using a series of API drawing commands. | Based on XML. An image can either be created on the server side, or with an external application (such as Inkscape) and then loaded directly into the browser. |
| 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. [3] | Better performance with large rendering areas. [3] |
| API does not support accessibility. | SVG markup and object model supports accessibility directly. |
Browser support
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.
References and links
- ↑ 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
- ↑ Raphaël—JavaScript Library, http://raphaeljs.com/
- ↑ CAKE - Canvas Animation Kit Experiment, http://code.google.com/p/cakejs/
Other links:
- 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
(no comments yet)