How/what is the best way to animate svg?

Question

css

In general, I want svg to come to life.
I've read a lot, someone says no, you can't animate svg with css because it's evil and doesn't work everywhere.
Others say no, js is evil, why then css3.
I don’t know for sure, but in fact, if you take js, then the animation will always work if there is no css3 support (and there are few of them, it seems like).
In defense of css, I’ll say that it’s easier, and more correct.
Actually, what to choose?
SMIL - it seems to be morally obsolete or they wrote nonsense again?

Happy new year, let everything be done without any problems.
I would like to hear from those who have been doing this for a long time and know where the pitfalls are.

Answer 1

To be honest, I have a rather vague idea of ​​a full-fledged SVG animation using CSS3. And what was wrong with JS? The fact that you need to load additional libraries? So we kind of like the age of high-speed Internet has come. Dial-Up is long gone, and ADSL has already remained with individual users. And even those, perhaps, are not the target audience of the project, which requires some special frills in this area.
Use, for example, Snap.svg , well, or any other library for full-fledged work with SVG animations and manipulations. And you will be happy :)

Answer 2

raphaeljs

Answer 3

Try TweenMax . Small Twenmax tutorial To animate path a simple lib
lmgonzalves.github.io/segment
Chrome has removed support for SMIL, so you can forget about it.