SVG animation. Introduction

Source: Dev.to

There are multiple ways to make your SVG animated:

• SVG/SMIL
• CSS animation
• JavaScript

SVG/SMIL

SMIL stands for Synchronized Multimedia Integration Language, an XML‑based language that allows you to animate various attributes directly inside the SVG element. An advantage is that the animation is preserved even when the SVG is embedded via <img>.

Some discussions claim SMIL is obsolete, but according to caniuse SVG SMIL is still fully supported by major browsers.

SMIL defines several animation elements that can be used directly inside SVG elements, such as animate, set, animatemotion, animatecolor, etc., enabling shape changes and other effects.

For a detailed guide on using SVG/SMIL, see the article “A Guide to SVG Animations with SMIL” on CSS‑Tricks.

CSS

Using CSS to animate SVG is preferable when the animation is simple and relies on presentation attributes, the transform property, or other CSS properties. See the discussion of presentation attributes for more details.

JavaScript

JavaScript can manipulate DOM elements, making it a powerful tool for SVG animation. In particular, the animate method can be used to create complex, script‑driven animations.