Canvas and SVG are two exciting graphics features introduced in Internet Explorer 9 and are hardware accelerated. These technologies can be used to address a range of graphic scenarios on the modern Web. With a lot of excitement around Canvas, there has been a tendency to ignore SVG, which, in many cases, is the better choice.

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.

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.

Patrick Dengler in this article offer some thoughts on when to choose Canvas, SVG, or a combination of the two. To read this tutorial visit: http://www.htmlgoodies.com/html5/client/how-to-choose-between-canvas-and-svg-for-your-site.html#fbid=lz3kcncNc9W