×
Namespaces

Variants
Actions

Brief comparison of HTML5 Canvas and SVG

From Nokia Developer Wiki
Jump to: navigation, search

This article offers a brief comparison of the pros and cons of HTML5 Canvas and SVG.

Article Metadata
Article
Keywords: HTML5, Canvas, SVG
Created: trpeki (16 Nov 2011)
Last edited: hamishwillee (13 Aug 2012)

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.

Note.pngNote: The functionality and browser support of both technologies can be enhanced with libraries (like Raphaël [4] and CAKE [5]). The detailed examination of these is outside the scope of this article.


References and links

  1. Canvas Specification Draft, http://dev.w3.org/html5/spec/the-canvas-element.html
  2. SVG Specification, http://www.w3.org/TR/SVG/
  3. 3.0 3.1 Performance of Canvas versus SVG, http://smus.com/canvas-vs-svg-performance
  4. Raphaël—JavaScript Library, http://raphaeljs.com/
  5. CAKE - Canvas Animation Kit Experiment, http://code.google.com/p/cakejs/


Other links:

This page was last modified on 13 August 2012, at 02:13.
85 page views in the last 30 days.