Create animated, interactive vector graphics with Snap.svg

Adobe's new JavaScript library enables you to create impressive animated graphics in a flash.

There's exciting news from Adobe today with the release of Snap.svg. It's a brand new JavaScript library that's been created, says Adobe, with the aim of making SVG graphics as easy to work with as jQuery makes it to work with the DOM. Designed for maximum compatibility across modern browsers, with support for all the latest SVG features, it's also open-source and completely free.

Created from scratch by Adobe's Dmitry Baranovskiy (who also created current favourite SVG library, Raphaël), Snap enables you to work with existing SVGs, regardless of whether they were created with Snap or not, and animate them or add interactive elements. So you can create SVG content using the likes of Illustrator, Inkscape or Sketch and then manipulate and animate it using Snap's own tools. You can even work with unrendered SVG strings, enabling you to pull specific shapes out of an SVG file to use elsewhere.

Adobe describes Snap as being like jQuery or Zepto for SVG, and the Snap site contains a handful of demos of what you can do with it, as well as a short walkthrough to get you started with some of its essential functions. Here's one demo from the Snap site that gives you a basic taster of the sort of interactive tricks you can get up to with Snap.svg:

However if you want to get an idea of what can be achieved if you really let rip with it, take a look at the new PBS KIDS website, which is packed with elements created using Snap. Says Chris Bishop, creative director at 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."

Snap.svg is completely free and open-source (released under an Apache 2 licence) and is available right now. You can download it from the Snap site, which also features an exhaustive set of documentation, giving you the full scoop on all its features.

Words: Jim McCauley

Liked this? Read these!

What do you make of Snap.svg? Have your say in the comments!