SMIL, CSS animation and a bag of hell
It's late 2018, and if you're like me, you've probably been tasked to animate an SVG and now left to wonder, "What's the state of SVG animation? Isn't SMIL dead? Does CSS work?"
Long ago, SVG was boxed with its OWN animation specification, called SMIL ( Synchronized Multimedia Integration Language) which origins date back to 1999 and was adopted by the W3C in 2001 with SVG 1.0. Despite its spec, it never was adopted by Microsoft in IE or Edge, and its continued support is in question. Google announced in 2015 it's intent to depreciate SMIL support. This has been the proverbial nail in the coffin, but SMIL still works in Chrome, Safari, and Firefox (for now). There's no timeline for when SMIL will be dropped.
Rather than recant all of SVG animation, I highly (and I stress) highly recommend CSS-Tricks's SMIL is Dead, long live SMIL, which outlines SMIL and alternatives. The cliff notes are as follows:
- CSS Motion paths are only supported by Chromium-based browsers - this means no Safari, FireFox, Edge
- There's multiple libraries for morphing SVGs, including >Greensock, snapsvg and SVG Morpheus
- SMIL allows DOM events, but plain ol' vanilla JS works fine... and >Greensock.
- On animation complete works with SMIL, but also can be also be done via CSS by using simple CSS delay animations... and Greensock.
The SVG Path d and points attribute and CSS
CSS animations are the supposed heir to SVG animation. However, there's a lot of issues that arise. It's quite easy to use CSS to animate SVG fill properties, opacity, and even positions and basic shape using CSS transforms and using declarations such as:
So to tabulate the score: SMIL isn't supported in IE or Edge, and its fate isn't looking good. CSS doesn't a complete replacement as FireFox/Safari/Edge will not animate via CSS transition SVG point changes.
Greensock to the rescue
Greensock is pretty much the beginning and end to SVG animation (if you couldn't tell by the CSS tricks summary), there's SVG.js, Snap.svg (which seems to be mostly forgotten), Anime JS, and somewhat feature-limited Raphael (and a few one-off effects like Vivus, kute.js/SVG Morpheus) but none offer the power, flexibility, and ease of use of Greensock. Greensock makes cross-platform animation easy and compatible. It's also performant. Downside? It's a paid library.
Below is my hastily written test animation. Each point on the animation is given random values to move to, to create a jittering effect.
So here we are in 18, and the most reliable way to animate an SVG is via a paid library. I have to say though, Greensock's multiple SVG libraries are easy to use and impressive. I was hoping for a little more diversity, but with CSS motion paths and transitions only under consideration by other browsers, things aren't looking too great for SVG animation.