Jump to content


import only one svg or multiple svgs with different characters?

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I would like to do "complex" animation with gsap and svgs, but I don't know what is the best approach to this.
it is better to create and to import an unique svg with inside all the elements or maybe it is better 4 different svgs?
I have 4 different characters: a tree, a lamp, a desk and a man.
basically my animation is move the objects on the x, and appearing and to disappearing stuff.

any help, suggestion or advice?
I started to study gsap a few days ago, and i am still new to this :)

many thanks

See the Pen dXLEAx by mp1985 (@mp1985) on CodePen

Link to comment
Share on other sites

It's really tough to say. it probably depends on the complexity of the things you are animating to some degree.

From what you are describing with the desk, lamp, man, tree my guess is having them all in one SVG should be perfectly fine.

Link to comment
Share on other sites

On top of Carl has said regarding what you think of when you say "complex" I would mention that it would depend on how have you built your scene.


If you already have it all in one file and do not plan to alter the assets later, there is not particular advantage on splitting it into different SVGs. There is one benefit of keeping it all in one SVG, though. If you set you viewBox and preserveAspectRatio correctly, your stage will scale neatly without you having to do much.

  • Like 4
Link to comment
Share on other sites

I'd echo everything from above. 


Unless there is a really good reason to use multiple SVGs, I'd stay with one and you'll have less headaches. As Dipscom pointed out, you'll have control of the viewBox and scaling should be a breeze.


My best advice would be to take your time in asset preparation. Think about each move or rotation you'll want to make and group your elements accordingly. I find that the actual animation work with large SVGs is quite fast and easy if you've done your homework and prepared everything correctly. Also be sure to give meaningful names to your groups and elements. Otherwise you end up with a lot of .st0, st1, st2 etc which are no help at all.


That's my 2 cents worth.


Good luck and happy tweening.


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