How do you animate SVG for the web?

Question

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?

Answer 1

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 most regarded 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 most 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 (there's also a web editor called LottieLab), 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.

---

Canvas

Of particular note to people reading this, at times SVG is not the best options. A similar technology but with some key differences is using the <canvas> element. It is much more performant with a high amount of elements being rendered/animated but has tradeoffs which you can read about in this post of mine.

---

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.

Answer 2

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.

A polyfill is a special javascript piece of code that provides support for features missing from a browser, translating the original encoding in one that the browser can understand.

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.

To use SMIL on all browsers, including IE and EDGE, you just need to add this javascript polyfill to your web page:

https://github.com/ericwilligers/svg-animation

Here is a demo page using the polyfill made by Tom Byrne, the author of the popular flash2svg exporter:

the page without the polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

and the same page with the polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

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:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG ANIMATION JS LIBRARIES

The javascript way is more complicated. First of all you need to be a javascript programmer. Then you have to choose between many libraries. The more popular are:

• SnapSVG http://snapsvg.io
  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).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  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:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  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:

• Adobe Animate CC: the former Adobe Flash Pro was fully rewritten by Adobe to migrate from the now obsolete flash animations to the modern SVG animations. You can export the resulting SVG animations along with a custom javascript library, or choose to save in SVG+SMIL using plugins like "flash2svg". This last option is very efficient, I always use it instead of the bloated native exporter.

You can download the free plugin from here: https://github.com/TomByrne/Flash2Svg

Or install it from Adobe Plugins panel: https://creative.adobe.com/addons/products/7232

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.

References:
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: https://stackoverflow.com/questions/35727635/adobe-animate-snap-svg-plugin-huge-files

Answer 3

I've always found relying on anything other than JS libraries to be a huge pain WRT support/maintenance.

I've always used D3.js. It was originally created to create interactive SVG/DOM elements from data-sets. However, you can you it to modify SVG/DOM that is included in a page, as long as JS has access to it.

I've use in a variety of projects to create/animate SVG/DOM. some examples includ soft real-time dashboards, map visualizations, DOM transformations, and to create SVG files for inclusion in PDFs. I've seen it all over the web as well. The website has a bunch of examples and links to pages that have used it.

I recommend it because it's fairly cross browser compatible, has an active community, and is easy to learn. Take a look at the webpage and pay attention to the real world uses to see a small sample of what you can do with it.