SVG Loading Animation using SMIL and Illustrator for use in cross platform & cross browser


I came across SVG Animation after looking for a Cross Web Browser, Cross Mobile Platform solution for small animations instead of using Gif’s.

This tutorial simply shows how to make the SVG Animation as that was a little frustrating as it took me a while to work out how to make it rotate around the centre of the path. Hope this helps others.

The great thing about having an SVG Animation is you can use a shim to make it work cross browser, and then also use plugins on iPhone and Android Native applications so the same SVG Animation can be used cross Platform too.

Go full screen to read the code. I will make the text bigger for the next tutorial.