Complex SVG has bad performance in Chrome

Question

I'm using a rather complex inline SVG with more than 1000 individual paths. I need to style and animate several paths dynamically. Therefore I can't use a normal PNG/JPG Image.

If I scroll over the area where the SVG is used, Chrome gets laggy and the framerate drops dramatically. Even without animating/styling the SVG paths. No performance issues in Firefox and Safari so far.

There is a similar question about SVG performance with a working fiddle. The difference is that I'm using one big SVG and not 800+ simultaneously: Why is SVG scrolling performance so much worse than PNG?

Any ideas how I can improve the performance in Chrome? It seems like it's a chromium bug. So maybe there is a workaround?

/

Edit:

Here is a JSFiddle with a similar SVG file. I can't exactly provide the original SVG due to copyright reasons. As you scroll over the SVG in this example you'll notice a lower scrolling performance in Chrome: https://jsfiddle.net/0dsnymry/1/

Edit January 2020:

I don't experience this issue anymore. Might be fixed in a newer Chrome version.

Answer 1

For anyone still experiencing this issue, I have found the best solution to be to separate the SVG files out into several different images and absolute position them over each other in a relatively position div, i.e.

<div style="position: relative">
  <img src="img1.svg" />
  <img src="img2.svg" style="position: absolute; top: 0; left: 0; width: 100%" />
  <img src="img3-animation.svg" style="position: absolute; top: 0; left: 0; width: 100%" />
</div>

It is also very useful to separate the animations into their own SVG file, so you have only 1 animation per image.

It may sound counter-intuitive that whilst many SVGs cause performance hits in Chrome, to make a complex SVG render better you should include multiple SVG files, but it seems to be about getting a balance. You should limit the number of SVG files visible on the page at any one time, but trade that off against ensuring that the SVG is not too complex too.

Other solutions are to include contain: paint on the parent element (for non-animated SVG images, this will allegedly prevent Chrome from re-drawing the SVG every scroll, and instead cache as a bitmap the image and simply move it - I have found mixed results with this actually seeming to help) or similarly apply buffered-rendering: static to the SVG file (which again I have found a mixed bag - not sure what the support is like for that either, or whether it is vestigial given its age and seemingly poor up-to-date documentation).