Jump to content
GreenSock

iotron

Optimise SVG animation with high number of paths

Go to solution Solved by GreenSock,

Recommended Posts

Hi, the animation is running a little sluggish on some devices, probably due to a large number of paths. Any ideas on how to optimize the SVG or the animation for better performance without compromising much on the design? Thank you.

See the Pen abYwjrY by iotronlab (@iotronlab) on CodePen

  • Like 1
Link to comment
Share on other sites

That is a LOT of paths. Interested to see if someone has a good answer for you.

Link to comment
Share on other sites

Oh my goodness. Yeah, that's asking a LOT of the browser to render. Yikes. I would definitely recommend simplifying that quite a bit. You'd need to do so in your authoring software. You can try SVG OMG, but I'm not sure how effective it will be: 

https://jakearchibald.github.io/svgomg/

 

It seems to me like you'd need to be intentional about going in and eliminating a bunch of those paths. There's no way a software package can effectively automate that and know exactly which paths to completely delete, you know? 

  • Like 1
Link to comment
Share on other sites

20 hours ago, GreenSock said:

Oh my goodness. Yeah, that's asking a LOT of the browser to render. Yikes. I would definitely recommend simplifying that quite a bit. You'd need to do so in your authoring software. You can try SVG OMG, but I'm not sure how effective it will be: 

https://jakearchibald.github.io/svgomg/

 

It seems to me like you'd need to be intentional about going in and eliminating a bunch of those paths. There's no way a software package can effectively automate that and know exactly which paths to completely delete, you know? 

Sorry, my bad. I forgot to mention that the SVG is already optimized from SVGOMG. I am working on the SVG in Adobe illustrator. I have optimized the number of paths but it's still a lot because of the intricate design. So, there are a number of options I am thinking of trying, on which I would like your opinions.
1. Merge some of the paths into compound paths, lessening the number of paths.
2. Replace drawSVG with less resource heavy animations like opacity/autoAlpha toggle.

Thanks a lot for the help. ❤️ 

Link to comment
Share on other sites

  • Solution

If it were me, I would definitely eliminate a bunch of those paths (particularly where they're all bunched together anyway). But if you must keep the artwork as-is, then yes I think it'd be cheaper for the browser to animate opacity rather than drawing the line with drawSVG. 

  • Like 1
Link to comment
Share on other sites

I really like what you are doing, being an architect by education I really like that blue-print style. I do remember well the times, when we hat to reduce plan details because even or the state of the art sgi workstation wouldn't be able to handle them...

While the animation is impressing, I had to watch it multiple times before having understood some of what is going on, my suggestion would be to think in layers, maybe work with  a png background that is intentionally slightly blurred and use svg only for the crisp background?
With a little masking and maybe even subtle parallax like movement overlay gradients etc, you can do a lot of magic too...
Just my two cents...

  • Like 2
Link to comment
Share on other sites

17 hours ago, iDad5 said:

I really like what you are doing, being an architect by education I really like that blue-print style. I do remember well the times, when we hat to reduce plan details because even or the state of the art sgi workstation wouldn't be able to handle them...

While the animation is impressing, I had to watch it multiple times before having understood some of what is going on, my suggestion would be to think in layers, maybe work with  a png background that is intentionally slightly blurred and use svg only for the crisp background?
With a little masking and maybe even subtle parallax like movement overlay gradients etc, you can do a lot of magic too...
Just my two cents...

Thank you so much for the ideas. The buildings are the heritage of my city Kolkata, that's why I want to make the animation special. But my experience with animations is limited that's why "With a little masking and maybe even subtle parallax like movement overlay gradients etc" is out of my scope of imagination. Perhaps you can point me to any codepen with a similar effect so that I can try to figure out how to implement it.

Thanks a lot. Your two cents are greater than my animation skillset. ❤️ 

  • Like 1
Link to comment
Share on other sites

thank you @iotron that's seems entirely to much of a praise, your question made my ponder about doing some examples, and I already looked around for some line arte to use a an example. I would like to do it in way that's is well explained, and that might take a while.
 

  • Like 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.
×