Vector graphics are now taking over the web and even mobile applications. Icons, buttons and elements of web pages or mobile apps are now becoming increasingly vector based, dropping bitmaps because of the need to be rendered on all kind of screen resolutions, dpi, ratios, etc. and because the useful ability to “zoom” to better read pages on mobile browsers made the bitmaps assets ugly and unusable anymore.
So it’s time to start creating animated icons, backgrounds and controls in SVG but how do you animate SVG files?
A lot of this answer is also posted in this related question on how to animate illustrations for the web.
Avoid SMIL animations
SMIL animations don’t work in any IE, Edge, some mobile browsers, and are gradually being dropped by Chrome/Opera (though, more recently, the Chrome team said this deprecation is temporarily suspended). You should avoid using them 99% of the time.
Use CSS for very simple animations
SVG can largely be animated using pure CSS (including using
animations). It’s planned to get full CSS animation support but currently only some are supported and can be buggy with cross browser issues.
Sara Soueidan says CSS is great for animating SVGs but prefers JS because it helps solve these cross browser issues. As such, use it when you can but fall back to JS when the animations are more complex or don’t work cross-browser.
For complex animations that require the use of a timeline or something similar, using a library like GSAP can be very helpful. There are countless other SVG animation libraries, Snap.svg is another big one, but most don’t handle animations nearly as easily or as performant as GSAP.
For particular types of animation, using a particular JS plugin like GSAP’s MorphSVG can save you quite a bit of time because they take care of the cross browser issues and all of the calculations. However, most animations don’t require plugins like this. See “A Guide to Alternatives to SMIL Features” for more.
The only software I have come across that exports to SVG+JS are an Adobe After Effects plugin called Lottie (formerly Bodymovin), a Flash extension called Flash 2 SVG, and a small online tool called SVG Circus. Other than that, software animators like Adobe Edge Animate, Adobe Animate CC, or Animatron export to SMIL animations which shouldn’t be used. As such, it’s best to have some developer make SVG+CSS or SVG+JS animations using exported SVGs from an editor. Inkscape has a great resource linking tutorials and examples of how to do this.
I’m sure in the future more animation software will support exporting to SVG+JS.
Some other important notes
It’s best to use SVGs in an
<object>tag or embedded directly in an
<svg>XML element if it’s interactive and as a background image if its not interactive, but there are other ways to do it as well.
For a more whole view of web animations, read Rachel Nabor’s post on A List Part. For some additional suggestions in tooling, this post is very helpful, though I don’t agree with all of the sentiments, especially with how it presents SMIL animations.