JavaScript is the last of the ways we’ll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can’t do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the SVG code itself, which is more powerful in that it can animate more things including the shape of the elements themselves.<\/p>\n\n\n\n
JavaScript can do everything either of those can do, and do it well. It just comes at the cost of either writing really complicated code yourself, or the overhead of a library to help you. But once you’re up and running, the syntax can be really wonderful and friendly to animations and the performance can actually be top-notch.<\/p>\n\n\n\n
Another advantage to going with JavaScript for SVG animations is support. There are plenty of quirks to be concerned about while animating SVG. Some browsers don’t support transforms on elements. Some browsers do weird things with page zooming. Some are inconsistent with transform-origin. JavaScript libraries often help with these problems.<\/p>\n\n\n\n
While we’re talking about animation specifically, many JavaScript SVG libraries are about working with SVG in general. They can create and manipulate it, access properties from the element, change them, etc. Kinda like adding a more robust API to SVG.<\/p>\n\n\n\n
Snag.svg<\/a> – “jQuery for SVG”<\/p>\n\n\n\n Basic example of using Snap.svg:<\/p>\n\n\n\n