Web Application in SVG, Performance Issues and Viability

Question

We are a new startup that is going to develop a web application for the fashion industry. We thought about going with the canvas (we didn’t worry about IE support), but now that we’ve read about Raphaeljs and jQuerySVG, we are intrigued by the possibilities of building the entire interface and units in SVG.

Here are the benefits that come to my mind:

• independent permission
• the ability to scale elements and save the form and view
• optimizing browsers on the way
• We do not need to draw everything in the canvas, we can use the coordinates to draw units (elements)
• No need to learn XML; easy to learn and use?
• SVG is quite wide, so it should conveniently handle various forms of design.
• like canvas, we can use HTML5 and CSS3 functions along with SVG ("n drop" drag and drop, advanced CSS3 effects), even jquery effects
• since we are not going to use any complex 3D rendering, therefore, apparently, there should not be too many hits in performance with full-screen vectors?

I would like to hear your comments based on past experience regarding the viability of the SVG used to render the entire web application.

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

Greetings

Answer 1

Some unsorted food for thought:

A canvas is just a bitmap. This happens faster when rendering a large number of objects. SVG, on the other hand, must maintain links to every object that it displays, and slows down a significant mass of objects.

... but these links mean that some things related to the things you draw are done for you. SVG is faster when rendering really large objects.

SVG had worse use than Canvas. But browsers are both now, so I don’t see much concern there, I suppose.

The game is likely to be faster in Canvas. A huge map program is likely to be faster in SVG.

There is some browser optimization for the Canvas browser. Last week was the debut of hardware acceleration of Chrome 7.0. Preview IE9 and Opera already have hardware acceleration (I don’t remember FF).

The canvas is still very useful (MeasureText returns width, but not height!), But I really enjoy working with it so far.

Answer 2

I use SVG for simple logos and icons, and the only problem is with the webkit error regarding the background being displayed as white rather than transparent, as other browsers do. On a slow machine, I noticed that seven objects blink one after the other when they are displayed for the first time, but I don’t know that I am doing something wrong.