Web application in SVG, performance issues and viability

Question

Hi all,

We are a new startup that is going to develop a web app for the Fashion industry. We were thinking of going with canvas (are not bothered about IE support) but now after reading about Raphaeljs and jQuerySVG, we are intrigued as to the possibilities of building the entire interface & units in SVG.

Here are the advantages that come to my mind:

• resolution independent
• ability to zoom the items and retain the shape and look
• browsers optimization coming on the way
• us not having to draw everything in canvas, we can make use of co-ordinates to draw the units (items)
• no need to learn XML; easy to learn and use?
• SVG is quite broad so should comfortably handle various design shapes
• like canvas, we can use HTML5 & CSS3 features alongside SVG (drag 'n drop, advanced CSS3 effects), even jquery effects
• as we are not going to make use of any complicated 3d rendering, so presumably there should not be too much of a performance hit with full screen vectors?

Would love to hear your comments based on past experience as to the viability of SVG being used for an entire web application render.

We have looked into canvas for almost two weeks and are convinced we can get all our needs from it but if SVG can do the same, it would be awesome and actually preferred(?).

Cheers

Answer 1

Some unsorted food for thought:

Canvas is just a bitmap. It is faster when rendering large numbers of objects. SVG on the other hand must maintain references to each object that it renders and slows down signifigantly with a ton of objects.

...but those references mean that some of the footwork of dealing with the things you draw is done for you. And SVG is faster when rendering really really large objects.

SVG has seen poorer adoption than Canvas has, though. But browsers have both now so I don't see much worry there I suppose.

A game would probably be faster in Canvas. A huge map program would probably be faster in SVG.

Some browser optimization for Canvas is here. Last week was Chrome's 7.0 hardware acceleration debut. IE9 preview and Opera already have hardware accel too (don't recall FF).

Canvas is still very much a living spec (MeasureText returns a width but no height!), but I've loved working with it so far.

Answer 2

I use SVG for simple logos and icons and the only issue is a webkit bug regarding the background being rendered as white instead of transparent as other browsers do. On a slow machine, I noticed seven objects blinking on, one after the other, when rendered the first time but I don't know if I'm doing something wrong.