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>
?