01. CSS is good for transformations(opens in new tab)
CSS is great for pretty much any animation that you can achieve with it. But in SVG, it has its limitations because not all SVG properties can be animated via CSS.
So, if you need to animate a property that cannot be animated using CSS, you can choose either SMIL or JS. CSS is generally great for animations including transformations. CSS animations on SVGs also perform better on mobile than SMIL animations.
02. SMIL isn't futureproof(opens in new tab)
SMIL animations have one major advantage over JS animations: they are preserved when the SVG is embedded as an image (using <img> or as a background image in CSS).
SMIL is also capable of animating properties that CSS can't currently animate – such as path data properties, for example. But SMIL doesn't work in any version of IE, and will be deprecated in favour of the Web Animations API in the future.
Defining multiple animations on the same element using SMIL can easily become tedious, especially if they include multiple transformations – which is where CSS comes in handy.
However, JS animations will not be preserved when the SVG is embedded as an image.
Words: Sara Soueidan (opens in new tab)
Sara Soueidan is a frontend developer, writer and speaker from Lebanon.
Like this? Read these!