A very good article for anyone interested in SVGs!
TL;DR; There is 3 main ways to animate SVGs: SMIL, CSS, and JavaScript, but today you should go with the JS way.
To me, the most interesting section of the article was the : SMIL vs CSS vs JavaScript . The authors main points in that section are:
SMIL: The current and future state of browser support for SMIL is the main reason why I neither use it nor recommend using it anymore today. [...] I expect SMIL usage to drop even more in the future.
CSS: As for CSS, it can only animate so many SVG properties, not all of them
JS: This is why JavaScript is currently my go-to tool for animating SVG, and my library of choice is Greensock.
I think this CSS/JavaScript comparison is true for much more than SVG: For instance, before having good Flex CSS properties for your layout you would need to use Javascript to do the job for you. CSS is clean but less bleeding-edge than JS.
TL;DR; There is 3 main ways to animate SVGs: SMIL, CSS, and JavaScript, but today you should go with the JS way.
To me, the most interesting section of the article was the : SMIL vs CSS vs JavaScript . The authors main points in that section are:
SMIL: The current and future state of browser support for SMIL is the main reason why I neither use it nor recommend using it anymore today. [...] I expect SMIL usage to drop even more in the future.
CSS: As for CSS, it can only animate so many SVG properties, not all of them
JS: This is why JavaScript is currently my go-to tool for animating SVG, and my library of choice is Greensock.
I think this CSS/JavaScript comparison is true for much more than SVG: For instance, before having good Flex CSS properties for your layout you would need to use Javascript to do the job for you. CSS is clean but less bleeding-edge than JS.