HTML5 Canvas Vs SVG/VML?

Please tell me what do you think about HTML5 Canvas vs SVG/VML? Give me pros and cons within comparison. Thank you!!!

Solution 1:

HTML5 Canvas is simply a drawing surface for a bit map. You set up a draw (Say with a color and line thickness) , draw that thing, and then the Canvas has no knowledge of that thing: It doesn't know where it is or what it is, it's just pixels. If you want to draw rectangles and have them move around or be selectable then you have to code all of that from scratch, including the code to remember that you drew them.

On the other hand, every SVG/VML element you create is a real element in the DOM. By default this allows you to keep much better track of the elements you create and makes dealing with things like mouse events easier by default.

Canvas would be better for faster things and heavy bitmap manipulation (like animation), but will take more code if you want lots of interactivity.