CSS, SMIL & JavaScript each have their pros and cons. Weigh them up with your needs to make an informed decision...
01. CSS is good for transformations
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
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.
03. JavaScript offers creative freedom
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.
However, JS animations will not be preserved when the SVG is embedded as an image.
Words: Sara Soueidan
Sara Soueidan is a frontend developer, writer and speaker from Lebanon.
Like this? Read these!
- How to build an app: try these great tutorials
- Brilliant Wordpress tutorial selection
- Our favourite web fonts – and they don't cost a penny
