It is possible to take a static SVG document and animate it using Javascript. The major problem is writing the code that provides the intermediate positions of the path descriptions. For smooth animation you need to generate the inbetween positions of, say, 800 path definitions, and render these at a speed of about 80 millisecs a frame (12 frames a second).
The quality of Javascript implementations have improved significantly and it is now feasible to do that. An example of a library designed for inbetweening attributes and properties, including SVG paths, is GSAP from Greensock.
As an example the Florence logo animation has been generated using both SVG declarative animation and the GSAP Javascript Library:
Hitting the Bottom Pink Arrow animates using SVG declarative animation. Using the top Cyan Arrow generates the same animation using GSAP. You can compare the two on your favourite browser. (You will need to refresh the page before trying the alternative arrow.)
Browser Results on a PC (out of 5):
- 5=smooth animation
- 4=some lost frames especially late on or when the side of the Florence town hall becomes visible
- 3=jerky motion even early on
- 2=definite errors in the rendering
| Browser | SVG | GSAP | Comments |
|---|---|---|---|
| Brave | 4 | 5 | Probably the best browser overall at the moment (2016) |
| Firefox | 4 | 5 | Better than a year ago |
| Chrome | 3 | 5 | Definitely got worse in the last year. It used to be better than Firefox using SVG animation |
| Opera | 3 | 4 | Using v38.0 |
| Edge | 0 | 3 | Really disappointing performance. Edge is not much better than IE |
| IE | 0 | 2 | IE10 does not clip to the SVG width and height |
File sizes are:
SVG drawing 1,815 KB SVG animate commands 4,814 KB GSAP + Javascript 4,064KB
Surprisingly the Javascript is smaller and no attempt was made to keep the file size down. It can almost certainly be made smaller.
This seems a more attractive solution to animating SVG than using CSS animation.
The first 20 logo animations have also been translated to GSAP with excellent results.
The full Florence animation havs also been translated to GSAP with excellent results. This means all 24 animations run well in GSAP.
Some details of the XSLT transformations are available.
If you are using EDGE as your browser, you may be surprised to find that the SVG animations appear to be working despite no support from Microsoft. The reason is that many have been implemented using the GSAP library when the browser in use appears to be EDGE.