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!
- Our favourite web fonts - and they don't cost a penny
- Amazing examples of HTML5
- Illustrator tutorials: amazing ideas to try today!
What do you make of Snap.svg? Have your say in the comments!