3

I'm working on an interactive solution in ReactJS that allows people to pan and zoom SVGs, but I am having problems with performance (the SVG stutters when dragged or zoomed ) because of detailed SVG. I'm using Adobe Illustrator and Inkscape to work on these SVG, but I noticed a larger SVG performance better than a smaller SVG and decided to study why this happened. Is there any SVG tag that affects the performance when draggin SVGs? I noticed that when I zoom in the performance gets worse, even though I simplify the paths.

I have already searched for and applied SVG optmizations (simplifying, SVGO, SVGOMG) and it seems that removing clipPath improves the performance.

Baryarte
  • 63
  • 1
  • 6
  • an example svg would be he helpful. The encountered performance hits might also be related to your zoom script (especially regarding the eventListeners' bindings). Reducing svg complexity is always a good starting point, but you might get better results tweaking your svg markup manually (since your app/generator might have introduced a lot of convoluted structures that could be simplified). Usual suspects are also complex svg filters. – herrstrietzel Feb 15 '22 at 23:21
  • Use of filters can slow down rendering significantly. But other than that, we would need to see the SVGs. – Paul LeBeau Feb 16 '22 at 10:51
  • SVG perfomance also depends on the browser, usually. Which optimizations have you tried with Inkskape? I recommend "Save as" with format "Optimized SVG". – Sascha Doerdelmann Sep 20 '22 at 07:57

0 Answers0