Animate SVG Assets In a Snap

This week Adobe announced the release of a new and open-source JavaScript library that will enable designers and developers to animate and manipulate scalable vector graphics (SVG).

Available free on GitHub, Snap.svg is designed for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera), offering capabilities like masking, clipping, patterns, full gradients and groups that will make it a "snap" to create interactive, resolution-independent vector graphics. Perhaps most exciting however is that Snap works with existing SVG assets, meaning SVGs won't have to be created in Snap to work with them. In short, developers will be able to use tools like Illustrator, Inkscape or Sketch and then animate using Snap.

"Adobe is passionate about creativity and advancing the modern Web," said Vincent Hardy, director, Web Platform Engineering, Adobe. "We have done extensive work on new technologies like Snap.svg that address the ever-changing needs of designers and developers so that their work can reach the largest audience across browsers."

Adobe set up a few demos here, to showcase what's possible with Snap.svg and you'll likely agree the rendered effects are pretty impressive. The solution is already being used on websites including PBS Kids, but expect to see it used increasingly over the coming months and years.

"At PBS KIDS our mission is to create engaging content that will educate, inform and inspire kids," said Chris Bishop, creative director, PBS KIDS. "By having Snap.svg in our Web tools arsenal we can now achieve the same type of expressive content that we have on television across various devices in a lightweight, flexible and stunning way without sacrificing quality."