SVG
animations are truely amazing. They work without javascript, are scalable and can be embedded almost
everywhere. Despite that, they aren't really used much, most developers favour lottie - it's multiplatform and has better tooling available.While there is a lot of possibilities with SVG animation, it isn't perfect. It's usually more cpu intensive
than dedicated animation frameworks and there aren't really any editors available - your only choice is to write the
XML yourself.One major advantage of svg animation is it's size. It does not require any extra baggage to
display in a browser and is just a regular text file, so it gets nicely compressed and does not impact the load time of
your webpage. SVG animation is also widely supported, with all major browsers supporting it since 2012. Internet
explorer, of course, does not support it, but I don't think we need to worry about it for much
longer.
Simple animation I made by hand. Pure svg, without any css or js.Making this animation was quite a hassle. I had to manually draw a path, measure it using
SVGGeometryElement.getTotalLength() and type out the animation for it. This could be automated - the
KanjiVG project is a database of stroke order for Japenese characters in the
form of svg paths, and you could easily make outlines for latin letters.
There is still the problem of strokes "bleeding" into each other. This could be solved by
putting each path into a mask of the finished stroke, but this would be hard to automate, as fonts have all their
strokes combined. Maybe some basic computer vision can help here!