import only one svg or multiple svgs with different characters?

[mp1985]

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

[Carl]

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.

[Dipscom]

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.

[PointC]

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.