Sunday, April 8, 2012

Html5 Canvas vs SVG vs div

What is the best way for element creation on the fly and being able to move it around? Let's say I want to create rectangle, circle and polygon then I want to select the objects and move it around

And how is the performance of those three while in use for showing a web page? Let's say I want to create three visually identical web page and have header, footer, widget and text content in them. The first one is created using full canvas, the second is created using svg, and the third is created using plain div html and css.

Thanks in advance

Source: Tips4all

1 comment:

  1. For your purposes, I recommend using SVG, since you get DOM events, like mouse handling, including drag and drop, included, you don't have to implement your own redraw, and you don't have to keep track of the state of your objects. Use Canvas when you have to do bitmap image manipulation and use a regular div when you want to manipulate stuff created in HTML. As to performance, you'll find that modern browsers are now accelerating all three, but that canvas has received the most attention so far. On the other hand, how well you write your javascript is critical to getting the most performance with canvas, so I'd still recommend using SVG.