Context: I'm working on an infographic in SVG. I want to have the document come to life thanks to animations, especially by chaining animations. I'm already familiar with SVG but started learning SVG animation only recently.
Since SMIL is deprecated, I'm trying to produce animations in pure SVG.
Looking at this article (esp. the Handy Dandy Replacement Reference Chart at the end), I'm under the impression that I need to stop using suc 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 reference on Mozilla, I see <animate> and <animateTransform> inside the list, with no warning about them being SMIL, or the need to stop using them.
Moreover, it seems Chrome normally warns against the use of SMIL animations in the console but I can see no such warning when using <animate> or <animateTransform> (be it in an SVG document, or inside an HTML document that includes an inline or object SVG.)
Long story short, it's not clear to me what is SMIL and what is pure SVG. Can anyone shade some light on the topic? Can I use <animate> and <animateTransform>?
SMIL is no longer deprecated by Chrome.
We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.
Basically SMIL in SVG is everything in the Animation chapter of the specification.
That's the <animate> element, the <set> element, the <animateMotion> element and the <animateTransform> element. (the SVG specification also contains an <animateColor> element which should not be used, you can just replace that with animate).