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 pro