Deprecated Smil Svg Animation Replaced with CSS or Web Animations Effects (Hover, Click)

Is SMIL for SVG deprecated, un-deprecated or... paused but will eventually be deprecated?

trying to establish whether it's worth spending some time mastering
SMIL. The official line appears to be that this animation technology
is functionally deprecated... but the reality on the ground suggests
this isn't the case at all.

Of course it's worth in my opinion to master SMIL.

For many reasons, it's worth learning:

SMIL is a native SVG framework that was developed with it
CSS animation for SVG still cannot replicate all the rich features of SMIL

I will try to show this with specific examples.
Poor support for SVG filters and CSS animation of their attributes
CSS has very weak support for vector objects and their attributes. For example widths, heights, radii, letters, as a vector element. Chrome has really started supporting it, but not all browsers do it.

Using the example below, we will consider the difference in the organization of the animation logic SMIL VS CSS Animation

All SMIL animation objects are interconnected by logical chains of conditions.

For example, the animation of the movement of the little man will start after the end of the animation of drawing the route begin="anPathWalk.end"

There are no such possibilities in CSS, it is necessary to calculate the absolute value of the animation start time or its delay each time.

Which causes great difficulties in design and even greater difficulties when changing the logic of object interaction

In smil, when changing the logic, it is enough to change the logical chains of animation start and the SMIL preprocessor will calculate the necessary animation start times

<style>
.container {
width:100%;
height:100%;
}
.play-audio {

position:absolute;
top:0%;
left:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" version="1"   viewBox="0 0 800 540"  >
  <defs>
   <path id="walk"
   d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19"  />
  <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0.1s"
          dur="0.3s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
      </g>
  </defs>
  
  <image xlink:href="https://i.stack.imgur.com/XPdWW.png" width="100%" height="100%" />
  <path id="train" stroke-dasharray="312" stroke-dashoffset="312" stroke-width="2" d="M443 534 426 477 415 435 397 391 375 347 350 304 334 277 317 251" style="fill:none;stroke:violet;"/>
  
    <text
      font-size="28"
      font-family="Times New Roman"
      fill="#517DA6" >
<textPath id="result"
xlink:href="#train">
<tspan dx="0" > 🚅 </tspan>
<tspan dx="-12">  - </tspan>
<tspan dx="-15"> 🚃</tspan>
<tspan dx="-12">   -</tspan>
<tspan dx="-15">   🚃 </tspan>
<tspan dx="-12">   - </tspan>
<tspan dx="-15"> 🚃</tspan>
<tspan dx="-12">   -</tspan>
<tspan dx="-15">   🚃 </tspan>
<tspan dx="-12">   - </tspan>
<tspan dx="-15"> 🚃</tspan>
<tspan dx="-12">   -</tspan>
<tspan dx="-15" >   🚂 </tspan>
 <animate id="anTrain"
   begin="0s;an5.end"
   dur="12s"
   repeatCount="1"
   attributeName="startOffset"
   values="-60%;45%;45%;-60%"
   fill="freeze"/> 
</textPath>
</text>  
  
  <path id="walk"
   stroke-dasharray="409"
   stroke-dashoffset="409"
   stroke-width="3"
   d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19"
   style="fill:none;stroke:#B34EE9">
  <animate id="anPathWalk"
   attributeName="stroke-dashoffset"
   begin="anTrain.end-7.5s"
   dur="2s"
   values="409;0"
   fill="freeze" />
  </path>

 <use xlink:href="#Man" transform="translate(0,0) scale(1.2)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an2"
       begin="anPathWalk.end"
       dur="16s"
       repeatCount="1"  >
          <mpath xlink:href="#walk"/>
     </animateMotion>    

          </use>    

      <use xlink:href="#Man" transform="translate(0,0) scale(1.2)" style="stroke:crimson;" > 
     <animateMotion id="an3"
       begin="anPathWalk.end+0.5s"
       dur="17s" repeatCount="1"  >
             <mpath xlink:href="#walk"/>
      </animateMotion>   
     </use> 
       <use xlink:href="#Man"
       transform="translate(0,0)
       scale(1)"
       style="stroke:black;"> 
     <animateMotion id="an4"
       begin="anPathWalk.end+1s"
       dur="13s"
       repeatCount="1"  >
          <mpath xlink:href="#walk"/>
      </animateMotion>   
       </use>      
       
       <use xlink:href="#Man"
       transform="translate(0,0)
       scale(0.8)"
       style="stroke:red;
       fill:black;"> 
     <animateMotion id="an5"
       begin="anPathWalk.end+1.5s"
       dur="11s"
       repeatCount="1"  >
          <mpath xlink:href="#walk"/>
     </animateMotion>    
       </use>    
        <use xlink:href="#Man"
        transform="translate(0,0)
        scale(0.8)"
        style="stroke:black;"> 
     <animateMotion id="an5"
      begin="anPathWalk.end+1.8s"
      dur="9.5s" repeatCount="1"  >
         <mpath xlink:href="#walk"/>
     </animateMotion>    
       </use>   
  
</svg>

</div>
<div class="play-audio">    
        <audio class="my_audio" controls preload="true" autoplay="autoplay">
            <source src="https://w1.musify.club/track/dl/4064186/eruption-one-way-ticket-original.mp3" type="audio/mpeg">
        </audio>
<div>

without smil, is gif my only option?

SMIL is not as dead/deprecated as you believe it is. The Chrome developers recently posted this:

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.

Prevent SVG SMIL click animation from running more than once

Set the pointer-events property to none at the end of the animation then further mouse clicks are ignored.

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

  <polygon points="60,60 90,120 30,120">
    <animateTransform
        id="at"
        attributeName="transform"
        type="translate"
        from="0 0"
        to="0 -39"
        dur="1s"
        begin="click"
        fill="freeze"/>
   <set
        attributeName="pointer-events"
        to="none"
        begin="at.end"/>
 </polygon>

</svg>

CSS @keyframes or SMIL, which one choose for an animation?

Well if you have just a simple X translation i would suggest to use transform: translateX(-50px) (or how many pixel you need). But if you need to animate something you should use keyframes.

Part of SVG changing in animation on hover

This is a slightly hacky way to do it, using a blue circle with a black stroke that starts so thick it fills its interior. Hovering over the circle causes the stroke to shrink to nothing.

.logo-background {    fill: blue;    stroke: black;    stroke-width: 200;    transition: stroke-width 500ms;}.logo-background:hover {    stroke-width: 0;}.logo {  fill: none;  stroke: white;  stroke-width: 5;  pointer-events: none;}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" height="100px">  <defs>    <clipPath id="circle-clip">      <circle cx="100" cy="100" r="100" />    </clipPath>  </defs>
  <circle class="logo-background" cx="100" cy="100" r="100" clip-path="url(#circle-clip)" />  <rect class="logo" x="60" y="60" width="80" height="80" rx="5" ry="5"/></svg>