Need to speed up my SVG. Could I convert to WebGL or canvas?

Question

I have an SVG drawing with 10138 parts, so it runs slowly.
I want to make it run more like http://workshop.chromeexperiments.com/globe

Here are the solutions/questions I'm considering

• Is there any way to have the SVG parts render in a less processor-intensive way?
• Can I convert the SVG to WebGL or canvas?
• Can I have it run as SVG but render thru WebGL or canvas?

I just want to make it faster .. thoughts?

Here is a screenshot

Answer 1

As a simplified rule of thumb:

• SVG scales reciprocally with number of objects to be drawn
• Canvas scales reciprocally with resolution.

So I 10138 objects to be kept in memory with SVG will slow down things (though I can't say what the hard limits are). If you get into this range of objects I believe that canvas and WebGL might provide better performances. Most modern browser already support hardware accelerated canvas rendering.
However doing user interaction is more involved with Canvas compared to SVG.

You can also try to mix them (see here for more details).
Here are some useful resources:

• SVG swarm vs Canvas swarm (using D3.js)
• Stackoverflow thread with useful infos

Answer 2

The slowdown for an SVG with a very large number of pieces comes from the non-retained mode of SVG. Without more details about what your SVG looks like and how it behaves, it's hard to make concrete suggestions. So in general:

• If your graphic is generally static (you don't need to track mouse events per graphical object) you can use an HTML5 canvas instead (where the drawing commands blit pixels to an image and thereafter you basically have a static image).

• If your graphic has a lot of repeated parts, using SVG with <use> elements may reduce the memory footprint and improve performance.