The following are the possible ways to animate svg:
SVG SMIL ANIMATIONS
The SVG can be animated via its powerful native markup language, called SMIL, exported directly from animation tools like Adobe Animate CC+flash2svg plugin.
To animate an SVG with SMIL even on browsers lacking support, you just need to use a SMIL polyfill.
The SMIL polyfill made by Eric Willigers does just that: it translates SMIL into Web Animations API that even the Microsoft browser supports. It is so efficient that Google Chrome developers decided to drop native SMIL support and focus on Web Animations, leaving to the Eric Willigers polyfill the task to play SMIL files in Chrome.
Someone wrongly interpreted this as a deprecation of SMIL by Chrome, and criticized the devs for this choice. But it was not a true deprecation, just a relocation of the job of interpreting SMIL on a polyfill level.
In fact the Chrome devs themselves cited the Willigers polyfill in the very official announce about their intent to deprecate SMIL.
So if you read around the web about the demise of SMIL, don’t worry. The “death” of SMIL was greatly exagerated. It’s more like a rebirth.
Here is a demo page using the polyfill made by Tom Byrne, the author of the popular flash2svg exporter:
the page without the polyfill:
and the same page with the polyfill:
If you look at the source it is pretty much self-explanatory.
Also the performances with the polyfill are often better than the original SMIL, because on many browsers Web Animations is hardware accelerated, while SMIL is usually not.
EXPORT ANIMATIONS IN SVG SMIL
The simpler way to create SVG animations is to use tools like Adobe Animate CC to draw them and plugins like Flash2svg ( https://github.com/TomByrne/Flash2Svg ) to export them in SVG.
With it you can export almost all animations+sound as a single SVG file, like this cartoon episode:
SVG ANIMATION JS LIBRARIES
This library is the successor of the old and popular Raphael animation library made by the same author. Very stable, but it converts SVG in an internal format at runtime to animate it. Morphing options are also very basic, just linear interpolation. (NOTE: There is also a snap.svg plugin for Adobe Animate CC, but the exported files are bloated. The exporter produces one snap svg command for every frame of the animation, not every keyframe, producing a 18Kb svg file with over 1000 lines of code, just to rotate a simple rectangle through 360 degrees. Flash2svg plugin is much more efficient, just one command and few bytes to do the same job).
A fully featured morphing library that allows to easily animate SVG, and without the need to convert them in an internal format. Just create 3-4 svg keyframes in Inkscape and the Greenock SVGMorphing lib will automatically interpolate between the frames and create all the in-between frames for a smooth playback. Here is an example:
If you want to animate in 3D this library is very powerful.
Seen.js renders 3D .obj files meshes in SVG and animates them very easily.
SVG IMAGES EDITORS
As for the tools, you can create the animation keyframes mainly with three software:
Inkscape : open source, has tons of features, its an advanced vector editing package made by people partecipating in the SVG Working Group. The reference for the SVG format. Not easy to learn.
Adobe Illustrator: commercial, very powerful vector drawing software, it offers many features still not supported by SVG, but it has also the worst compatibility with the format. You will often need to manually edit the exported SVG file to fix illustrator mess. But it is very popular in art school, and all graphicians know how to use it.
Affinity Designer: This is a commercial software like Illustrator, but with an excellent SVG compatibility, almost at the level of Inkscape. The UI is much more friendly, and it is now becoming very popular among SVG artists.
SVG ANIMATION EDITORS
Currently the only SVG animation editor is this:
You can download the free plugin from here:
Or install it from Adobe Plugins panel:
Unfortunately Adobe Animate CC is commercial. There are free open source alternative animation applications, but I tried them all and they still suck IMHO. Let's hope for the future.
My more exhaustive blog post on the subject: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec
The case referenced about snap.svg: