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:

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:

    svg #mypath:hover {
      fill: #333333;

See the Pen Basic SVG hover by Greg Gant (@fuzzywalrus) on CodePen.

CSS animations extend to many, (if not most) SVG properties except path "d", animations paths and points. This creates an issue; you can warp, move and filter your SVG to your heart's content but not actually manipulate the points with CSS. There's a bit of reasoning here, as it'd be easy to pollute a CSS file with 100 of kilobytes if not megabytes for animation frames but without SMIL, we're left to javascript to carry the burden.

Chris Coyer wrote a pretty interesting post Randomizing SVG Shapes, and the codepen demo is pretty nifty although he fails to mention one thing: it doesn't work in any browser other than Chrome.

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.

See the Pen Arrow test v2 by Greg Gant (@fuzzywalrus) on CodePen.

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.

Recommended Reading