Web Platform Team Blog

Making the web awesome

Introducing Snap.svg: The Next Generation JavaScript Library for SVG Graphics

Published by Jonathan Dunlap and Christian Cantrell

Today the Adobe Web Platform Team is announcing version 0.1 of Snap.svg, a brand new JavaScript library for creating SVG. Snap.svg provides web developers with an intuitive and powerful API for animating and manipulating both existing SVG content and designs generated with Snap.

Currently, the most popular library for working with SVG is Raphaël. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and has been optimized for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting modern browsers means that Snap can support powerful features like masking, clipping, patterns, full gradients, groups, and more.

Another unique feature of Snap is its ability to work with existing SVG code (think “jQuery or Zepto for SVG”). That means you can create SVG content in tools like Adobe Illustrator, then manipulate it using Snap to build interactive charts, responsive interfaces and more. You can even work with strings of SVG (for example, files loaded via Ajax), which would allow you to query for specific shapes.

Finally, Snap supports animation. By providing a simple and intuitive API for animation, Snap can help make your SVG content more interactive and engaging.

Snap is 100% free and 100% open-source (released under an Apache 2 license). We hope you will love it and welcome you to provide any feedback or contributions. Site

PBS Success Story:

“At PBS KIDS our mission is to create engaging content that will educate, inform and inspire 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 the quality.”

Chris Bishop – Creative Director, PBS Kids

Miguel Montanez from PBS KIDS talks about using Snap.svg on their new site:

One Comment

  1. October 24, 2013 at 4:14 am, Ahmad Alfy said:

    It’s a smart move to get the creator of Raphael to create Snap 🙂 I can’t wait to get my hands on it!