Svg.js: SVG and Browser performance and rendering optimization

[Salitehkat]

Hi all,
I am planning to load an external svg and then animate some of the elements iniside. Plus, and this is the heavy part, the svg will be zoomed and panned with the mouse wheel. In terms of performance, what is ideal? to load the entire SVG and then adress each element to animate or to load separated svgs and later animate them? I am very concerned about the rendering process optimization ,(especially on each zooming). Any tips are super appreciated.

Thanks!!

[Fuzzyma]

The paint optimisation of browsers regarding svg is not that great. Some people even started wrapping each svg element in its own div to get around that. So in this terms multiply svgs would be worth it. However, this will change at some point and then you are left with heavily clutterted code (+ i dont know how old this problem is and its maybe fixed already)

I think to find the optimal performance you simply need to test it yourself. Running this with the profiler will show you where the bootlenecks are.
That said, the 3.0 version will have much better performance on animation :)

[saivan]

Please submit general questions like these on stack overflow :) This is an issues board, we generally like to mainly address issues here. But yes; you might want to look into optimisations such as this https://www.crmarsh.com/svg-performance/ are very popular. In an ideal world; you wouldn't have to do this sort of thing, but unfortunately; svg rendering engines need some work on most browsers :P Can we close this issue?

[dotnetCarpenter]

@Salitehkat I'm closing this since it is not a concrete issue with svg.js. Please write again if there is an issue with svg.js and I will re-open the issue.

[Salitehkat]

Sory sorry, didnt see these messages. Thanks for managing.