Best Practices

The previous post is a best practices SVG animation, as presented by MSoft.
It  works with great economy of means. One creates a transformObject which is
appended to the rotating gear. This is what allows one to introduce complexity.

The genius of SVG is that figures are recognized as such (unlike the canvas, where one needs to ask the context to redraw elements explicitly). Canvas elements are basically raster constructs, whereas SVG shapes are vectorial. Animating on the canvas can be laborious for the developer. Experienced developers  recommended it when one has many objects to move at the same time, where it will be faster than SVG.