Jump to content
GreenSock

iotron

Optimise SVG for draw SVG plugin

Recommended Posts

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.

Link to comment
Share on other sites

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?

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×