Optimise SVG for draw SVG plugin

[iotron]

Hi, should we have a compound path in SVG or multiple single paths grouped for better performance in the draw SVG plugin? Also, is there any tutorial to efficiently design SVG for better performance with the plugin? Thank you.

[GreenSock]

3 minutes ago, iotron said:

Hi, should we have a compound path in SVG or multiple single paths grouped for better performance in the draw SVG plugin?

It's really up to you based on the effect you want, but my guess is that multiple single paths might be easier to work with. 

 

4 minutes ago, iotron said:

Also, is there any tutorial to efficiently design SVG for better performance with the plugin?

Performance likely has absolutely nothing to do with the plugin - I'd estimate that 99%+ of the CPU load comes from browser rendering (not GSAP setting the values). So the key when working with SVG is to minimize the amount of pixels that must be repainted (small display bounding box) and fewer paths overall. Think of it this way: the browser has to do math to dynamically fabricate all the pixels for each path, so you want to minimize its workload. 

 

I've seen people scale a simple SVG to be like 5000px + in each direction, animate it, and then wonder why the browser struggles to keep up. That's a lot of pixels to ask the browser to repaint 60 times per second. See what I mean?