Geek Answers Handbook

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

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

Here are the solutions / issues that I am considering

  • Is there a way for parts of the SVG to display less intensely?
  • Is it possible to convert SVG to WebGL or canvas?
  • Can I run it as an SVG, but do it through WebGL or canvas?

I just want to make it faster .. thoughts?

Here is a screenshot

+8
html5-canvas svg canvas webgl
source share
3 answers

Use http://sigmajs.org/

sigma.js is a lightweight, open source JavaScript library for drawing graphs using the HTML canvas element. It has been specially designed for:

Display interactive static graphs exported from graph visualization software - for example, Gephi. Dynamically display graphs that are generated on the fly.

-5
source share

As a simplified rule of thumb:

  • SVG scales mutually with the number of objects to draw
  • The canvas is scaled mutually with resolution.

So, 10,138 objects that will be stored in memory using SVG will slow down (although I can’t say what the hard limits are). If you fall into this range of objects, I believe that canvas and WebGL can provide better performance. Most modern browsers already support hardware accelerated canvas rendering.
However, user interaction is more related to Canvas than to SVG.

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

+16
source share

Slowdown for SVG with a very large number of fragments comes from the unsaved SVG mode. Without any details about what your SVG looks like and how it behaves, it’s hard to make concrete suggestions. So generally:

  • If your graphics are usually static (you don’t need to track mouse events on a graphic object), you can use the HTML5 canvas instead (where the drawing commands mix pixels with the image, and after that you are basically a static image).

  • If your graph has many repeating parts, using SVG with <use> elements can reduce memory and improve performance.

+13
source share

More articles:


All Articles