How do you animate SVG for the web?

A lot of this answer is also posted in this related question on how to animate illustrations for the web.

Avoid SMIL animations

Sara Soueidan, probably the best animator of SVGs on the web, wrote “I know I wrote the guide to SMIL animations but, seeing their future, I don’t personally use them anymore.” You shouldn’t either.

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 :hover states, transforms, transitions, and 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.

Use JavaScript animations if CSS won’t work

Most of the time, SVGs can be animated using a little JavaScript without the need of a JavaScript animation library. Animating in JS has much more cross browser support and is fairly easy to use with some basic understanding.

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.

It’s also acceptable to use polyfills for SMIL, but I’m weary to do so because they aren’t very widely used/tested. With that being said, Eric Willigers and FakeSmile are the two most common.

Tooling

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 important to keep in mind performance. Sara Drasner created some performance benchmarks for SVG which shows you should opt for hardware accelerated CSS animations whenever possible but fallback on a good JavaScript approach when not possible.

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