By Matt Visiwig Sep 29, 2022
TL:DR; While the future looks iffy, SMIL was never deprecated and works on modern browsers.
Chances are, if you look into animating SVG with SMIL, you’ll run into an article that suggests SMIL is dead.
Fair. At the end of 2015 when it was published, SMIL had been sentenced to an abrupt end as Chrome announced intention to deprecate SMIL. Sword through the heart.
Their argument was that
Fast-forward to 2022 and the only browsers that don’t support SMIL are Internet Explorer (officially retired) and Opera Mini. Wait, what happened?
Towards the end of 2016, Chrome suspended its decision to deprecate SMIL. However, they did so in a fashion that hints that SMIL deprecation is still being pursued, placing the future of SMIL in limbo. The change in heart is because Chrome listened to the web developer community, who pointed out cases where there was no replacement for SMIL.
While JS libraries, such as GSAP, can handle pretty much all lost functionality when (or if) SMIL is sunsetted. JS comes with a steep learning curve that isn’t ideal for the simplest of animations.
CSS is an easy replacement for light SVG animation. However, there are notable capabilities it cannot handle, such as animating movement along a path, morphing shapes, and animating gradients.
Overall the one thing that may never get replaced is the ability to handle animation within a single, independent file. You can display an animated GIF on a webpage without the dependency on other files. That’s handy when you can download a loading animation from a stock graphics website and throw it on your site without knowing a thing about animation. SMIL is the native animation language for SVG and works inside SVG files without reliance on external files or scripts.
I have to give the most annoying answer for this question: it depends!
If you’re already regularly using CSS or JS, I’d recommend you start learning animation with one of those languages. JS can lean on CSS, so it never hurts to have a great foundational understanding of CSS and CSS animation. Sometimes you can simply swap classes (via JS) to trigger animations and get on with your day. For more control when dealing with complexity, you’ll want to look at the Web Animations API or a JS animation library like GSAP.
That said, I wouldn’t completely write-off SMIL, especially if you’re animating SVG which is an ideal graphic format for web based animation. For one, I would argue it’s a bit more intuitive for beginners and two, learning SMIL will give you a better understanding of SVG code, which is quite useful as a front-end dev. Lastly, if JS is out of your reach, SMIL has capabilities that you cannot achieve with CSS (yet).
If you work with inline SVG and already have experience with CSS- and JS-animation, I promise SMIL basics are easy to pick up in a single afternoon.
There is of course the real possibility that SMIL will get killed off, so if that’s your reason to avoid learning it, I won’t judge you. There is no reason you HAVE to learn SMIL.
Is SMIL dead in 2022?
No, SMIL works in modern browsers.
Will SMIL get deprecated at some point?
There is a decent chance this will happen, but it’s been years without any updates or news on the likelihood. And now that SMIL outlived IE, one of the culprits that put SMIL at risk in the first place, there is the real possibility SMIL will be left alone. Time will tell.
VISIWIG © 2017 - 2022