Как анимировать форму пути без использования SMIL?

Насколько я знаю, это невозможно сделать только с помощью svg. И ни с CSS.

Вы можете либо использовать библиотеку SVG-анимации, например snap.svg, либо написать собственную небольшую JS-анимацию (например, с помощью RequestAnimationFrame) .

Я тоже думаю, что для этого потребуется js, но для этого примера это не так сложно и может быть включено прямо в ваш документ svg:

svg {
    outline: 1px solid silver;
}

path {
    opacity: .25;
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
}

#test {
    opacity: .5;
}

<svg width="200" height="200">
    <path stroke="red" d="m 22 100 q 68 0 136 -68" />
    <path stroke="blue" d="m 22 100 q 68 0 156 0" />
    <path stroke="green" d="m 22 100 q 68 0 136 68" />
    <path id="test" stroke="black" d="m 22 100 q 68 0 136 -68" />
   <script type="application/javascript">
    // get your element
    var tst = document.querySelector('#test');
    // get the required segment (here the quadratic curve)
    var seg = tst.pathSegList[tst.pathSegList.length-1];
    // your required properties
    var start = -68,
        end = 68,
        dur = 3000;
     
    // the distance of our journey
    var dist = end-start;
    var speed = dist/dur;
    var startTime = performance.now();
    // set your animation function
    (function move(time){
      // request the next frame as soon as possible
      requestAnimationFrame(move);
      // get the position at our current time
      var pos = (time-startTime)*speed+start;
      // we finished th first animation
      if(pos > end){
        // reset and repeat
        pos = start; 
        startTime= time;
        }
      // update our point position
      seg.y = pos;
      })();
    </script>
</svg>

Ps: запятая в атрибуте d допускается только между двумя числами (для разделения векторных значений), ваш фрагмент не будет работать в FF.

Чтобы анимировать SVG, вам просто нужно использовать полифилл SMIL.

Полифил — это специальный фрагмент кода javascript, который обеспечивает поддержку функций, отсутствующих в браузере, переводя исходную кодировку в ту, которую браузер может понять.

Полифил SMIL, созданный Эриком Виллигерсом, делает именно это: он переводит SMIL в API веб-анимации, который поддерживает даже браузер Microsoft. Он настолько эффективен, что разработчики Google Chrome решили отказаться от встроенной поддержки SMIL и сосредоточиться на веб-анимации, предоставив полифиллу Эрику Виллигерсу задачу воспроизведения файлов SMIL в Chrome.

Кто-то ошибочно истолковал это как отказ от поддержки SMIL в Chrome и раскритиковал разработчиков за этот выбор. Но это не было настоящим устареванием, а просто перемещением работы по интерпретации SMIL на уровне полифилла.

На самом деле сами разработчики Chrome процитировали полифилл Willigers в самом официальном объявлении о своем намерении отказаться от SMIL.

Так что, если вы прочитали в Интернете о кончине SMIL, не волнуйтесь. «Смерть» СМИЛ была сильно преувеличена. Это больше похоже на перерождение.

Чтобы использовать SMIL во всех браузерах, включая IE и EDGE, вам просто нужно добавить этот полифилл javascript на свою веб-страницу:

https://github.com/ericwilligers/svg-animation

Вот демонстрационная страница с использованием полифилла, созданного Томом Бирном, автором популярного экспортера flash2svg:

страница без полифилла:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

и та же страница с полифиллом:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Если вы посмотрите на источник, это в значительной степени самоочевидно.

Кроме того, производительность полифилла часто выше, чем у оригинального SMIL, потому что во многих браузерах веб-анимация ускоряется аппаратно, а SMIL обычно нет.