Until a few weeks ago, I was relying on anime.js to animate content including SVG.
The biggest downside to this approach as @Egg and @handrawn was the lack of a Timeline Panel.

My go-to application for SVG production for as few years has been Boxy SVG and a few weeks pack launched v4, which handles SVG animation with timelining.
There is no current tutorial or documentation, just a commitment to fully develop the animation aspects:
animate over 50 different properties such as fill color, stroke width, font size, view box and path data. Motion paths and transform animations are also supported in this release
In other words, you can currently achieve a hell of a lot.

I produced this, while learning my way: SVG - Animated.xar

If you open into https://boxy-svg.com/app, you can roll your own.
If you want to see what I worked on, drag this into Boxy: TG.svg.

The mechanics of adding the animation into a Xara design are a bit crude presently but essentially create a Box 500px square.
Open the exported SVG file, saved from Boxy, in a text editor and copy the contents into the Box's Placeholder Body.

It even works as far back as Xara WDPv11.
Do note, you see nothing in Preview, you have to open into a more modern browser.

Acorn