Canvas vs SVG – Comparison of the two graphic features of HTML5

Inline declaration of SVG inside HTML tags has been a major feature of HTML5 – it means now no “object” wrapper  – <object> will be used and svg tag can be directly used inside html. Truly speaking, HTML5 Canvas and SVG are two exciting graphics features available  These technologies can be used to address a range of graphic scenarios on the modern Web.

The first question that comes in mind is when should one use canvas and when SVG. After studying and searching a lot over this I have found some very crucial points which are very helpful to answer this question.

Let’s go through the basic constructs of these two

Canvas

  • Canvas is a bitmap with an “immediate mode” graphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.
  • Pixel-based (canvas is essentially an image element with a drawing API)
  • Single HTML element similar to <img> in behavior
  • Visual presentation created and modified pro-grammatically through script
  • Event model/user interaction is harsh—at the canvas element only; interactions must be manually programmed from mouse coordinates
  • API does not support accessibility; markup-based techniques must be used in addition to canvas

 SVG

  • SVG is known as a “retained mode” graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the <svg> element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.
  • Object Model-based (SVG elements are similar to HTML elements)
  • Multiple graphical elements which become part of the Document Object Model (DOM)
  • Visual presentation created with markup and modified by CSS or pro grammatically through script
  • Event model/user interaction is object-based at the level of primitive graphic elements (lines, rectangles, paths)
  • SVG markup and object model directly supports accessibility

The basics of their usage can be understood by going through some quick scenarios like –

  • High fidelity complex vector documents have been, and will continue to be, the sweet spot for SVG. Highly detailed for viewing. When you consider the usefulness for observing a large schematic, but the need to drill into the detail, or print the entire document for engineering purposes, the “scalable” in Scalable Vector Graphics becomes abundantly clear.
  • if the developer wishes to reuse that image on a larger scale, or if the end user uses a high-DPI screen, the raster image becomes pixilated, or the need for a larger version of the file is necessary to preserve the fidelity. SVG can thus serve as a nice image replacement format for even the simplest of images on a Web page.
  • Pixel manipulation is simply not possible with SVG. It is the differentiating factor between the two technologies. Because Canvas is all about drawing and manipulating a pixel-based drawing surface, several experiments and showcases of Canvas include sophisticated algorithms to achieve impressive graphic effects such as ray tracing or filters.
  • In case of interactive charts and graphs SVG has been found very useful.  In canvas, creating either of these effects requires you code your own hit detection using the event object’s mouse coordinates.
  • At the same time, if there is large volume of data to be visualize in form of charts/maps then we should prefer Canvas. With Canvas, these can be quickly drawn without the cost of updating a DOM.
  • When a scenario contains both the need for visually intense dynamic graphics and animations (Canvas) as well as rich user interaction (SVG), both of these technologies can and should be used. These are known as hybrid scenarios.
  • Now a days, 2D casual  drawing apps are using Canvas. (Reasons can be – Vendors such as Adobe are beginning to support Canvas as an export, casual games do not often require sophisticated hit testing)
  • For an application with limited number of drawing elements, performance wise both SVG and Canvas are same but if we go for large scale then SVG is stays a lot behind Canvas. varying-number-of-objects
  • See how their performance changes with change in drawing height. varying-drawing-area-height

In the end, both Canvas and SVG are important components of the HTML5 graphically rich Web.  If we show all the above discussed scenarios in form a cross over placed in middle.

Right now there are a lot of supporting libraries available on web for both svg and canvas. If I name a few Kinetics.js, Fabric.js, Raphael.js, Paper.js and many-many more. These libraries are there to make us work with these two technologies in an easy way. In my next blog, I will be discussing over Raphael.js with a my current project scenario. Till then happy coding…

I have gone through a lot of links on web to collect all the above discussed content. If you wish you can follow below given links –

http://en.wikipedia.org/wiki/Canvas_element#Canvas_versus_Scalable_Vector_Graphics_.28SVG.29

http://www.sitepoint.com/canvas-vs-svg-how-to-choose/

http://www.backslash.gr/content/blog/webdevelopment/7-10-javascript-canvas-frameworks

http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx

One thought on “Canvas vs SVG – Comparison of the two graphic features of HTML5

Leave a Reply

Your email address will not be published. Required fields are marked *


five + = 14

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>