SVG rect vs div vs canvas

Question

Just imagine that you are building Google Maps for a large building plan with 3000 rooms.

I need to display up to 3000 rectangles (it would be best to also display random polygons, but at the moment this is not the biggest problem). Each of them should have events attached to them, such as mouseover and click, which will have some effects for other dom elements on the page. I also need to be able to increase and decrease.

I know I can do this with SVG (Raphael.js), simple rendering or canvas.

I am wondering if anyone has specific recommendations for what I'm trying to build. It should be fast enough (about 1 second or so) in the slowest browsers. (IE8, Firefox 3.6, and hopefully IE7, although I don’t dream too much ...)

Thanks for the help, Nicolas.

PS: So far I have seen that rendering 3000 rectangles takes up to 7 seconds on IE8 with Raphael.js, which is pretty slow. It seems that rendering a simple div in IE8 is up to 6 times faster.

Answer 1

3000 DOM . , , "", DOM- (divs, SVG) . DOM.

excanvas . -, , excanvas . excanvas Canvas, VML (SVG), ( ), SVG/VML.

. : HTML5 Canvas vs. SVG vs. div

, . , .

- , , Canvas.