html5 canvas element and svg

Question

Why do we need the html5 canvas element, when the same can be achieved through embedded svg?

Answer 1

SVG and canvas aren't really interchangeable technologies. SVG is a type of retained mode graphics where everything is drawn from a rather abstract model (the SVG document). Canvas on the other hand is a kind of immediate mode graphics, where there is no model and the client (JavaScript) must take care of redrawing, animations etc.

Answer 2

you might also find this comparison useful: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Answer 3

an illustration: My blog engine (blogger) doesn't support SVG (it's not a XHTML document). I wrote a tool converting SVG to the canvas element: http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html

Answer 4

http://people.mozilla.com/~vladimir/xtech2006/ has nice comparison.

With canvas you don't have to deal with the DOM, which leads to faster and easier to write code. SVG is a mess as a specification, too...

Answer 5

Here is an explanation of how to parse a simple svg and draw it on a canvas..

http://www.ikeralbeniz.net/2010/11/03/jugando-con-html5-canvas-y-svg-i/ http://www.ikeralbeniz.net/2010/11/04/jugando-con-html5-canvas-y-svg-ii/

in further posts the svg parser will be completed with transparencies and gradients

Answer 6

Because we then do not need to worry about what support such embedding ;-)

In this fashion the focus for application developpers is to adhere to standards and let the client designers do the same. and hence spare everyone to worry about plug-ins, versions, security setups, etc...