13

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

Qix - MONICA WAS MISTREATED
  • 14,451
  • 16
  • 82
  • 145
Kirk Strobeck
  • 17,984
  • 20
  • 75
  • 114
  • 2
    There are plenty of ways to do that, but it's impossible to say why your example runs slow without you showing it. You can try using the performance tools provided by the browsers, to see what operations are expensive. – Erik Dahlström Jul 25 '12 at 15:06
  • I posted a screenshot, maybe that will be more helpful – Kirk Strobeck Jul 25 '12 at 15:35
  • I wished this question was not specifically related to graph :) -- i am having issues with SVG complexity making browsers animations slow.. – Imran Bughio May 26 '14 at 07:13

2 Answers2

21

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:

Community
  • 1
  • 1
Ümit
  • 17,379
  • 7
  • 55
  • 74
15

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 1
    We haven't really worked much with SVG yet, but it should be possible to use Famo.us to do retain-mode rendering of SVG. If you or anyone else on here is an SVG guru, it's a path worth exploring. https://github.com/famous/famous (disclaimer: I work for famous. I just stumbled across this SO question by accident while looking for something else). At the end of the day, XML-based markup languages only have two types: children and strings. Marshalling types is a huge bottleneck. – Andrew De Andrade May 16 '14 at 17:43
  • To add a bit more for anyone who attempts this, check out how the Surface.js module in core is implemented. You'll probably need to make an SVGSurface.js module that works similarly. Then from there, break down what you're making into composable pieces that inherit from this. I'm speculating here. You may be able to ping our lead architect mark lu (mark @ famo.us) with specific questions. – Andrew De Andrade May 16 '14 at 17:48