What is pure SVG and what is SMIL?

Question

Context: I am working on infographics in SVG. I want the document to come to life thanks to the animation, especially with the animation of the chains . I am already familiar with SVG, but recently I began to study SVG animation.

Since SMIL is deprecated, I'm trying to create animations in pure SVG.

Looking at this article (especially in the Handy Dandy Replacement reference table at the end) , I get the impression that I need to stop using hattributes:

fill="freeze" repeatCount="indefinite" begin="hover" begin="circ-anim.begin + 1s" 

... because they are part of SVG SMIL.

But if I look at the SVG link on Mozilla , I see <animate> and <animateTransform> inside the list, without warning that they are SMIL, or the need to stop using them.

Moreover, it seems that Chrome usually warns about using SMIL animations in the console , but I don’t see such a warning when using <animate> or <animateTransform> (whether in an SVG document or inside an HTML document that includes an inline or SVG object.)

In short, I don’t understand what SMIL is and what pure SVG is . Can someone highlight the topic? Can I use <animate> and <animateTransform> ?

Answer 1

SMIL is no longer deprecated by Chrome .

We value all your feedback, and it is clear that there are cases serviced by SMIL that do not yet have a high precision replacement. As a result, we decided to suspend our intention to denounce and take smaller steps in relation to other options.

Basically, SMIL in SVG is all in the animation chapter of the spec .

This <animate> element, <set> element, <animateMotion> element, and <animateTransform> element. (The SVG specification also contains a <animateColor> element that should not be used, you can simply replace it with animation).