State of SVG Performance on iOS and other Tablets?

Question

Having decided to go with D3.js and SVG for visualizations it now looks like SVG will work fine in a desktop browser or native shell but I'm really perplexed by the drop in performance speed on the iOS mobile platform.

According to the following tests it now looks like SVG performance is getting better and not that far behind Canvas speeds, this is the good news:

• http://bl.ocks.org/2647924
• http://bl.ocks.org/2647922

The bad news is that if you run these tests in the Safari browser on the new iPad the speeds drop a lot for both SVG and Canvas. The terrible news is that if you run these tests in the new Chrome browser for the iPad the speeds drop much more.

I've read that Google is forced to use the UIWebview that is not accelerated by Apple's Nitro JavaScript engine. I've also read that Apple is pushing HTML5 but the demos only run in their own Safari browser.

What is the problem here anyways? The best target for my app is mobile yet even with great API's like D3.js and HTML5 standards like SVG performance is being pinched, is this just because Apple wants to hold up progress for their own agenda? Thats how it looks to me anyways. I'm not sure what these tests look like on Android? It would be great to know. If the tests would be positive maybe I will get rid of the iPad and just go with Android already.

The bottom line is that I'm just not sure if it is feasible to make my app using HTML5 technology due to these speed issues? I also have no interest in learning Objective-C as the future is going to HTML5. I believe in the web and its standards but it looks like they are being blocked. I'm very interested in knowing solutions to this dilemma.

Answer 1

iOS7 has notably bad performance animating SVG with JavaScript - although static SVG drawing is massively faster. We wrote a blog on the performance of the iOS7 release, which you can see for more gory details.

Update: iOS7.1 fixed the javascript animation performance problem. It's back to 50 fps

Answer 2

I found d3.js/SVG on my first gen iPad massively slower than running the same app on desktop browsers (FF/Chrome/IE 9+).

I wrote up the various improvements I attempted here: http://hivemindmap.blogspot.co.uk/2013/01/html5-and-interactive-graphs.html