There a way to optimize the performance of svg?

Question

I'm making an application with d3.js, but I'm driving a lot of data and graphics are way too big, which is slowing me much navigation.

Could someone tell me what could be a solution or a way forward.

This is the application. http://www.ingeniosolido.com/s2m2/prototype30/line_zoom_actual_30_interval.html

This is the code. https://gist.github.com/3854943

You don't provide us enough information. Please be more specific, and insert code here, not somewhere else. — Gabriel Florit, Oct 08 '12 at 21:03
Is the issue that dragging in the graph is slow in Firefox? Because it's not slow in other browsers AFAICT. — Erik Dahlström, Oct 10 '12 at 07:36

Erik Dahlström · Answer 1 · 2012-10-10T07:35:15.887

0

Have you tried to remove some (read: most/all) of the clip-paths? It's almost always faster to not use clip-path (unless it clips away expensive areas, e.g filters, opacity, complex geometry and so on).

It looked a bit like you could at least move some of the clipping up a level, to be on a parent <g> element for example.

Also, the svg you link to doesn't really qualify as big markupwise.

edited Oct 10 '12 at 07:35

answered Oct 09 '12 at 11:27

Erik Dahlström

59,452
12
120
139

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

It does not look like you are doing a lot of element specific interaction. You might consider rendering to canvas. See: HTML5 canvas alternatives for d3.js, graph visualization library

edited May 23 '17 at 12:27

Community

1
1

answered Oct 09 '12 at 20:50

Superboggly

5,804
2
24
27

There a way to optimize the performance of svg?

2 Answers2