Responsive Web Design with HTML5 and CSS3 - Second Edition

Animating SVG with JavaScript

With an SVG inserted into the page via an object tag or inline, it's possible to manipulate the SVG directly or indirectly with JavaScript.

By indirectly, I mean it's possible with JavaScript to change a class on or above the SVG that would cause an CSS animation to start. For example:

svg {
    /* no animation */
}

.added-with-js svg {
    /* animation */
}

However, it's also possible to animate an SVG via JavaScript directly.

If animating just one or two things independently, it's probable things would be lighter, code wise, by writing the JavaScript by hand. However, if you need to animate lots of elements or synchronize the animation of elements as if on a timeline, JavaScript libraries can really help. Ultimately, you will ...