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.
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.
JavaScript offers you great control over the animations, makes animating easier if you use one of many available SVG animation libraries (my favourite is snap.svg), and gives you finer control over timing functions and easing.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
However, JS animations will not be preserved when the SVG is embedded as an image.
