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

Question

TLDR: I'm trying to establish whether it's worth spending some time mastering SMIL. The official line (at least from Blink, but maybe not from Gecko) appears to be that this animation technology is functionally deprecated... but the reality on the ground suggests this isn't the case at all.

I would like to learn SMIL because it strikes me as an elegant technology - but I don't wish to spend a couple of months this year learning something which will be obsolete in a year or two.

Question: Is it worth learning SMIL?

---

A few years ago, the consensus was that the SVG's animation language, SMIL (Synchronized Multimedia Integration Language) was going to be deprecated:

In April 2015, the Blink team wrote:

"We intend to deprecate SMIL animations in favor of CSS animations and Web animations"

Source: https://groups.google.com/a/chromium.org/g/blink-dev/c/5o0yiO440LM)

The two main reasons for the intent-to-deprecate five and a half years ago appeared to be:

• "In terms of implementation, SMIL adds significant complexity to Blink"
• "Internet Explorer does not support SMIL which limited its use for critical functionality"

---

Roll forward to 2020 and Internet Explorer is lost in the mists of time and MSIE's successor, Edge, now uses the Blink rendering engine (alongside Chromium, Chrome, Opera, Brave and others).

Blink's main competitor, Gecko, also appears completely happy with SMIL:

• https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

The net result is that SMIL now has strong support across the entire modern browser landscape:

• https://caniuse.com/svg-smil

So where are we, now? Can we safely forget about the intention-to-deprecate from 2015 and work on the basis that SMIL is back and here to stay?

---

The proposed duplicate question and its answers provide good references to Blink's initial announcement that it intends to deprecate SMIL and later announcement that it intends to pause the deprecation of SMIL (which it will resume later). But the discussion is from 2016. The question does not contemplate whether, in 2020, SMIL advocates might (?) have quietly prevailed and, despite lack of official clarification, there may no longer be any determined intention to deprecate SMIL at all. (For instance, there never seems to be any enthusiasm from Gecko to deprecate SMIL, does there?)

Answer 1

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:

1. SMIL is a native SVG framework that was developed with it
2. CSS animation for SVG still cannot replicate all the rich features of SMIL
   I will try to show this with specific examples.
3. Poor support for SVG filters and CSS animation of their attributes
4. 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" > &#128645; </tspan>
<tspan dx="-12">  &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15">   &#128643; </tspan>
<tspan dx="-12">   &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15">   &#128643; </tspan>
<tspan dx="-12">   &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15" >   &#128642; </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>

There is no svg textPath analogue in CSS (I may be wrong, correct)
See how easy it is to make realistic animations in SMIL

<!-- https://stackoverflow.com/a/47860596/7394871 -->
<svg width="600" height="400" viewBox="100 100 400 300">

 <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan>
<animate  dur="10s" repeatCount="2" attributeName="startOffset" values="1%;55%;1%"/> 
</textPath>
</text>             
</svg>   

3. Examples with SVG filters

There is only one attribute in CSS for text outline -webkit-text-stroke:
SVG has the richest set of filters that can animate their attributes using SMIL

#3.1 Outline letters using the feMorphology and feColorMatrix filters

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="4" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.5
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
        
    </text>
</svg>

#3.2 Stroke animation

Add just one line of code

<animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.9
                             0 0 1 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4"  > DES           
       <animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

#3.3 Water turbulence effect

For the effect of turbulence, filters feTurbulence, feDisplacementMap are used

Hover over the picture to start the animation

<style>
.container {
width:60%;
height:60%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"   viewBox="0 0 500 300">
  <defs>
    <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
     <animate attributeName="baseFrequency" dur="18s" values="0.0001;0.02;0.0001;0.02;0.0001" begin="img1.mouseover" end="img1.mouseout" />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
    </filter>
  </defs>
<image id="img1" xlink:href="https://i.stack.imgur.com/hHGO8.jpg" width="100%" height="100%" filter="url(#myFilter)" /> 
  </svg>
</div>

4. Letter as vector

Any text within SVG is a vector object. Therefore, the whole word or each letter included in it has coordinates x, y Therefore, you can change these coordinates using SMIL to create various animation effects.
Below is one possible example of flying letters

<style>
 #text1 {

fill:#D0FF00;
}
 
</style>
<svg id="svg1" width="70%" height="70%" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
 
    <title>Animation of text x and y attributes</title> 
    

<defs>
<linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
        <stop offset="2%" stop-color="#151515" />
          <stop offset="70%" stop-color="yellowgreen" />
    </linearGradient>
</defs> 
 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="90" fill="#d3d3d3" stroke-width="1" stroke="#d3d3d3">Stackoverflow</text> 
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text> 

<animate xlink:href="#text1" 
      attributeName="x" 
      attributeType="XML"
    values="200 233 266 299 332 365 400 431 464 497 530 563 596;
    100 600 200 365 700 465 465 563 530 398 431 850 900; 
    200 500 900 950 150 531 300 620 150 266 365 650 900;
    332 233 820 300 800 633 200 670 300 850 800 530 266;
    464 900 900 900 820 670 430 900 530 600 233 365 100;
    332 100 100 100 500 100 800 563 900 700 900 100 100;
    200 233 266 299 332 365 400 431 464 497 530 563 596"
    dur="4s"
    begin="svg1.click"
    repeatCount="2" />
<animate xlink:href="#text1"
      attributeName="y" 
      attributeType="XML"
    values="500 500 500 500 500 500 500 500 500 500 500 500 500;
    100 200 850 100 250 175 750 100 750 720 850 500 50; 
    100 600 600 250 200 450 50 200 520 550 300 300 750;
    500 100 650 650 600 150 550 50 150 550 200 550 400; 
    800 300 100 750 150 650 75 350 550 700 755 120 800;
    800 600 300 150 750 350 700 650 200 250 500 650 100;
    500 500 500 500 500 500 500 500 500 500 500 500 500"
        dur="3s"
      begin="svg1.click"
        repeatCount="2" />
</svg>

Update

StackOverflow on world map

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="-10 150 1800 1253" >

<defs>
 <path id="Strack" d="m322.1 281.9c0 0 75.6 16 97.2 44.3 38 49.7-13.2 140.2 30.3 185.2 32.5 33.6 94.4 9.6 137.7 27.2 26.4 10.7 44.3 38.6 71.6 46.7 7 2.1 21.8 0 21.8 0" fill="none" stroke="black" /> 
 
 <path id="Ttrack" d="m 144.7062,657.68616 c 0,0 37.753,-102.00963 83.24497,-115.92056 40.72325,-12.4527 79.61954,30.26928 119.81051,44.34545 31.19139,10.92423 61.09073,30.67633 94.13684,31.11961 25.18481,0.33783 47.2325,-23.61256 72.3531,-21.78373 26.84437,1.95434 48.54017,23.28963 73.1311,34.23157 11.57342,5.1497 19.26927,7.93532 35.00956,14.78182 32.47733,14.12656 11.1456,44.34609 68.43253,-59.12726" fill="none" />  
 
 <path id="Atrack" d="m1145.2 859.2c0 0 25.7-28.7 27.2-46.7 2.4-27.5-8.5-59-28.8-77.8-31.6-29.4-89.6-10.3-124.5-35.8-36.7-26.9-35.4-92.1-75.5-113.6-74.3-39.8-252.9 0-252.9 0" fill="none" /> 
 
 <path id="Ctrack" d="m220 368.1c0 0 73.9 53.2 89.1 93.5 16.5 43.6-26.4 98.1-5.5 139.7 22.7 45.3 76.6 72.2 125.4 85.8 51.6 14.4 107.1-12.2 160.6-8.8 82.6 5.3 206.4 118.7 244.3 45.1 30.3-59-143.2-138.1-143.2-138.1" fill="none" /> 
 
 <path id="Ktrack" d="m1555.7 922.6c0 0 25.2-71.8 14.3-105.6-10.8-33.6-51.3-48.9-72.6-77-39.7-52.5-75.9-108.7-101.2-169.4-12.5-30.1 11.3-48.4-24.2-94.6-64.2-83.6-204.6-76.2-246.5-5.5-54.4 91.9 207.9 181.5 160.6 277.3-45.5 92.2-206 64.1-305.9 39.6C866 759.3 690.8 585.3 690.8 585.3" fill="none" />    
 
   <path id="all_Letter" transfotm="translate(0 -55)" d="M690.8 585.3H505c0 0-229.3 55.3-267.8-25.7-23.1-48.7 71.5-83.7 89.7-134.4 16-44.7-28.4-120.8 14.2-141.8 71.8-35.4 126 108.5 204 126.5 82.6 19.1 169.7-41.5 253.1-25.9 75.4 14.1 128.4 101.5 205 104.4 94.6 3.5 169.3-129.2 261.9-109.6 92.6 19.6 181 112.9 194.9 206.5 6.8 45.6-19.5 105-61.6 123.8-60.4 27-125.4-55.6-191.5-52.5-84.9 3.9-157.1 113.9-238.7 90-64.3-18.9-60.1-131.1-119.9-161.2-46.9-23.6-157.5 0-157.5 0z" style="fill:none;stroke-width:3;stroke:#0000f1"/>
    
         <!-- Shadow for letters -->
    <filter id="dropShadow">
      <feDropShadow dx="4" dy="4" stdDeviation="8" result="shadow"/>
       <feComposite in2="mask" in="shadow" operator="in" result="comp" />
      <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge> 
    </filter>
    <linearGradient id="gradEarth">
            <stop offset="40%" stop-color="dodgerblue"></stop>
            <stop offset="100%" stop-color="yellowgreen" ></stop>
        </linearGradient>   
      <linearGradient id="Lg" x2="0" y2="0%">
            <stop offset="10%" stop-color="yellow"></stop>
            <stop offset="25%" stop-color="#F437FE"></stop>
            <stop offset="50%" stop-color="dodgerblue"></stop>
            <stop offset="75%" stop-color="#1EFE6B"></stop>
            <stop offset="100%" stop-color="red"></stop>
            <animate attributeName="y2" dur="8s" values="0%;100%;100%;0%;0%" repeatCount="indefinite" />
              
        </linearGradient>   
</defs>  
   <image xlink:href="https://i.stack.imgur.com/lDCcN.jpg" width="1800px" height="1253px" opacity="0.8" />
   
 <g id="Gr_All" >
   <!-- Letter "S" -->
<g id="Sgroup"  transform="scale(1.5)" filter="url(#dropShadow)">
       <!-- Left leg -->
 <path id="leftF" fill="crimson"  d="m31.9 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2M58.7 64.5" class="leg">
    <animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="0.5s"
    values="0, 29.41,64.39;30, 29.41,64.39;0, 29.41,64.39" fill="freeze" repeatCount="indefinite" />
  </path>
       <!-- Right leg  -->
 <path id="rightF" fill="crimson" d="m58.7 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
     <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.25s" dur="0.5s"
    values="0, 56.21,64.39;30, 56.21,64.39;0, 29.41,64.39" fill="freeze" repeatCount="indefinite" />
</path> 
          <!-- Outline letter "S" -->  
 <path  class="Sbody" fill="url(#Lg)"  d="m59.3 12.8 6.4 20.3q-5.3-4.5-9.5-6.9-4.2-2.4-6.8-2.4-2 0-3.1 1.1-1.1 1.1-1.1 3 0 2.4 2.4 4.3 2.4 1.9 7.5 3.4 11.3 3.4 15.3 6.7 4 3.3 4 8.4 0 8.3-8.1 13.6-8.1 5.3-20.9 5.3-6.5 0-12.9-2.3-6.4-2.4-11.8-6.7V69.6L13.9 49.3q4.7 3.8 9.2 5.9 4.6 2 8.3 2 4 0 6.2-1.7 2.2-1.7 2.2-4.7 0-2.8-1.8-4.5-1.8-1.7-8-3.6-9-2.9-13.5-6.8-4.4-4-4.4-9.3 0-6.7 5.9-11 5.9-4.3 15.4-4.3 6.2 0 12.2 2.2 5.9 2.2 12.2 6.9z"> 
       <!-- Wiggle the letter "S" -->
   <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="1.5s"
    values="
    0, 43.25,51.14;
    30, 43.25,51.14;
    0, 43.25,51.14;
    -30, 43.25,51.14;
    0, 43.25,51.14"
    fill="freeze"
    repeatCount="indefinite"
    additive="sum"
    restart="whenNotActive" />
</path> 
</g> 
   <animateMotion xlink:href="#Sgroup" begin="btn1.click" dur="18s" restart="whenNotActive">
    <mpath xlink:href="#Strack" />
   </animateMotion>
 
          <!-- Letter "T" -->
<g id="Tgroup" transform="scale(1.5)" filter="url(#dropShadow)">
 <path id="Tleft" fill="#F437FE" d="m90.2 66.8c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M117 66.8" class="leg">
    <animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="1s"
    values="0, 87.71,66.69;30, 87.71,66.69;0, 87.71,66.69" fill="freeze" repeatCount="indefinite" />
  </path>
  <path id="Tright" fill="#F437FE" d="m117 66.8c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
     <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="1s"
    values="0,114.51,66.69;30, 114.51,66.69;0,114.51,66.69" fill="freeze" repeatCount="indefinite" />
</path> 
 <path  class="TBody" fill="#F437FE"  d="M136.9 11.5 118.6 47.3 116.2 20 108.9 60.1 121.7 69.6 87 67.7 96.1 61 85.5 19.2 81.9 52.3 74.5 15.7Z"> 
      <!-- Wiggle the letter "T" -->
   <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
    values="
           10, 105.69,52.39;
           -10, 105.69,52.39;
           -10, 105.69,52.39;
           10, 105.69,52.39"
           fill="freeze"
           repeatCount="indefinite"
           additive="sum"
           restart="whenNotActive" />
  </path>          
</g> 
   <animateMotion xlink:href="#Tgroup" begin="btn1.click" dur="18s" restart="whenNotActive">
    <mpath xlink:href="#Ttrack" />
   </animateMotion>


            <!-- Letter "A" -->
<g id="Agroup" transform="scale(1.5)" filter="url(#dropShadow)">
 <path id="Aleft" fill="dodgerblue" d="m147.4 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M183.5 64.5" class="leg">
    <animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="0.5s"
    values="0, 144.91,64.39;30, 144.91,64.39;0, 144.91,64.39" fill="freeze" repeatCount="indefinite" />
  </path>
  <path id="Aright" fill="dodgerblue" d="m183.5 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
     <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.25s" dur="0.5s"
    values="0,181.01,64.39;30, 181.01,64.39;0,181.01,64.39" fill="freeze" repeatCount="indefinite" />
</path> 
 <path  class="ABody"  fill="dodgerblue" d="m171 38-5.3-15.1-5.1 18.6zm30.5 21.7-33 10.2 8.4-11.3-2.4-8.4-12.3 0.9-3.6 9.8 5.3 4.2-35.9 2.6 8.7-6.5 11.6-45.2-6.6-4.3 44.5 1.5-10.4 3.7 18.2 40.6z">
      <!-- Wiggle the letter "A" -->
   <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
    values="
    0,164.7,51.4;
    30,164.7,51.4;
    0,164.7,51.4;
    -30,164.7,51.4;
    0,164.7,51.4"
    fill="freeze"
    repeatCount="indefinite"
    additive="sum"
    restart="whenNotActive" />
    </path>
</g> 
   <animateMotion xlink:href="#Agroup" begin="btn1.click" dur="18s" restart="whenNotActive">
    <mpath xlink:href="#Atrack" />
   </animateMotion>
   

            <!-- Letter "C" -->
<g id="Cgroup" transform="scale(1.5)" filter="url(#dropShadow)">
 <path id="Cleft" fill="#1EFE6B" d="m212.7 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M238.4 64.5" class="leg">
    <animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="1s"
    values="0,210.21,64.39;30, 210.21,64.39;0,210.21,64.39" fill="freeze" repeatCount="indefinite" />
  </path>
  <path id="Cright" fill="#1EFE6B" d="m238.4 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
     <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="1s"
    values="0,235.91,64.39;30, 235.91,64.39;0,235.91,64.39" fill="freeze" repeatCount="indefinite" />
</path> 
 <path  class="CBody" fill="#1EFE6B"  d="m256.7 40.5-4 26.3-1.6-10.7q-5.5 6.5-12.1 9.9-6.6 3.4-13.8 3.4-4.7 0-9.2-1.9-4.5-2-8.1-5.7-4.3-4.3-6.6-9.7-2.3-5.4-2.3-11 0-7.8 3.3-14.2 3.3-6.4 9.3-10.5 4-2.7 8.7-4 4.7-1.3 10.1-1.3 5 0 9.2 1.6 4.3 1.6 8 4.7l2.2-6.3 3.9 20.7q-2.5-3.6-5.9-5.5-3.4-1.9-7.3-1.9-4.5 0-7.3 2.7-2.8 2.6-2.8 7 0 4.6 3.4 7.8 3.4 3.1 8.6 3.1 3.2 0 6.6-1.1 3.4-1.1 7.4-3.4z">
      <!-- Wiggle the letter  "C" -->
   <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
    values="
    10, 227.9,51.1;
    -10,227.9,51.1;
    -10, 227.9,51.1;
    10, 227.9,51.1"
    fill="freeze"
    repeatCount="indefinite"
    additive="sum"
    restart="whenNotActive" />
</path>     
</g> 
   <animateMotion xlink:href="#Cgroup" begin="btn1.click" dur="18s" restart="whenNotActive"   >
    <mpath xlink:href="#Ctrack" />
   </animateMotion>
  

            <!-- Letter "K" -->
<g id="Kgroup" transform="scale(1.5)" filter="url(#dropShadow)">
 <path id="Kleft" fill="#FFDD00" d="m274.6 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2m26.8 0.1M313 64.5" class="leg">
    <animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="0.5s"
    values="0,272.11,64.39;30, 272.11,64.39;0,272.11,64.39"  repeatCount="indefinite" />
  </path>
  <path id="Kright" fill="#FFDD00" d="m313 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
     <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.25s" dur="0.5s"
    values="0,310.51,64.39;30, 310.51,64.39;0,310.51,64.39" fill="freeze" repeatCount="indefinite" />
</path> 
 <path  class="KBody" fill="#FFDD00" d="m329.1 68.8-30.1-3.7 6-3.9-17.6-18.1-2 0.4 4.1 20.1 6.4 6.8-38.1-4.3 6.8-5 3.6-41.2-7.4-4.7 30.5-3.7-8.5 6.6 2.5 16 13.4-15.9-3.7-4.6 27.7 1-19.7 15.8z">
         <!-- Wiggle the letter "K" -->
   <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="2s"
    values="
    0, 293.5,51.3;
    30,293.5,51.3;
    0,293.5,51.3;
    -30, 293.5,51.3;
    0, 293.5,51.3"
    fill="freeze"
    repeatCount="indefinite"
    additive="sum"
    restart="whenNotActive" />
</path> 
</g> 
   <animateMotion id="an_k" xlink:href="#Kgroup" begin="btn1.click" dur="18s" restart="whenNotActive"   >
    <mpath xlink:href="#Ktrack" />
   </animateMotion>
    
       <!-- Animating all letters together -->
   <animateMotion xlink:href="#Gr_All" begin="an_k.end" dur="18s" repeatCount="15" >
    <mpath xlink:href="#all_Letter" fill="freeze" additive="sum" restart="whenNotActive" />
   </animateMotion>
 </g>  
 
 <g id="btn1" transform="translate(-300,150)" onclick='play()' >
     <circle  cx="736" cy="263" r="8" fill="url(#gradEarth)" filter="url(#dropShadow)" /> 
     <text id="txt1" x="750" y="270" font-size="2rem" fill="crimson" >Start</text>
 </g>
</svg>

<script>
var zodiac = new Audio();
zodiac.src = src="https://ruv.hotmo.org/get/music/20170902/Bobby_McFerrin_-_Dont_Worry_Be_Happy_47980580.mp3";

function play() {
  zodiac.play();
}
</script>
</div>

From the above examples, it can be seen that a lot that SMIl can do for CSS is not yet feasible or is poorly supported

A lot of working applications on SMIL have already been made in the world, and therefore when in 2016 they wanted to abolish smill, the developers asked in the Chrome blog what to do with already created applications and where is an equivalent replacement. There is no answer yet.

I hope SMIL will continue to live.

Answer 2

The deprecation of SMIL got suspended. To quote, in case the site changes:

Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.

Quoting from the link:

As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.

SMIL not only can do awesome things, and have extra powers over eg. CSS animations, it lends another way of thinking about DOM animations. I think it's useful even if it's rarely used. Some alternatives eg. CSS Houdini have been in the making for years, with no cross-browser availability. So it's up to each person if it's worth it; depends on time available. Can be done for fun too. Same can be said about JS (non-SMIL) libraries like Lottie/Bodymovin too