SVG animation. Introduction

There are multiple ways to make your SVG animated:

• SVG/SMIL


• CSS animation


• JavaScript

SVG/SMIL

SMIL stands for Synchronized Multimedia Integration Language, that is an XML-based language. It allows to animate various attributes directly inside the SVG element. So, it has an advantage - the animation is preserved even if the SVG is embedded in <img>.

There are multiple talks that SMIL is obsolete and won't be supported in future. However, according to caniuse SVG SMIL is still fully supported by major browsers.

SMIL defined various animation elements, that can be used directly inside SVG elements: animate, set, animatemotion, animatecolor etc. We can change shape of SVG elements using it.

Here, the example of what can be achieved using SMIL:

To read more in detail how to use SVG/SMIL visit this wonderful article from css-tricks.com.

CSS

It's preferable to use CSS to animate SVG if the animation is simple and requires only presentation attributes, transform property or other CSS properties:

JavaScript

JavaScript can manipulate DOM elements so it's a powerful tool in the world of the SVG animation. Especially with method animate: