Animated SVGs just make sense. There are lots of articles explaining why you should be using SVG. There's even scientific evidence(!) that says animated icons are better than static ones.
So… where are all the animated icons? Why isn't the web filled with these amazing, accessible, performant animations? I have some ideas...
1. It's hard to make them
After working on a set of animated SVG icons for fun I've come to realise just how hard it is. Sure there are tools that can "help" but it's not exactly straightforward. SVG (and subsequently SMIL) seem to have been built with a focus on importing from a design application like Adobe Illustrator or Sketch and let those do the heavy lifting. In that regard, great success! 🎉 If you want to create animation by hand or want to have granular control over the state of the animation, that's where things get much harder. For many developers it's "too hard basket".
For this reason, I believe most animated icons end up using JavaScript (with something like Lottie or GSAP), or GIFs, or videos, or more exotic formats like APNG.
2. They don't look as good as they should
SVG anti-aliasing has a few bugs. Especially in WebKit (Safari). I think these bugs combined with all the other nicer options makes it less appealing. SVGs are supposed to be great for accessibility and performance but when there are bugs it makes them feel less reliable. Like, why use something when it doesn't work properly?
In saying that, I think much of the anti-aliasing concern can be mitigated by choosing your coordinate system wisely. If you choose 10×10 or 100×100 viewbox, as opposed to 24×24, you can reduce the chance of anti-aliasing issues. Actually, I'll go out and say it: 100×100 is the best viewbox to go with 💯
3. People don't notice them
I think most people, outside those who focus on product design/UX, don't notice animated icons. They're subtle. They don't bring in revenue. If you point them out, they go "oh yeah that is nice!" In saying that, there's the argument that they shouldn't be noticeable - the best design is invisible.
The web still has way more static icons than animated
I reckon it's just a matter of time before animated SVG icons are everywhere. They're great for accessibility, performance, and user experience. I think we just need better tooling and more awareness.
What do you think? Why aren't there more animated SVG icons on the web?