Adobe Snap.svg JavaScript Library
Written by David Conrad   
Thursday, 24 October 2013

Adobe released Snap.svg, a new free open source JavaScript library for working with SVG (Scalable Vector Graphics) at the HTML5 Developer's Conference in San Francisco.

Released under an Apache 2 license, Snap.svg was written by Adobe's Dmitry Baranovskiy who also authored Raphaël, which is currently, the most popular library for working with SVG.

Whereas Raphaël supports browsers all the way back to IE 6, restricting it to implementing a common subset of SVG features, Snap targets modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). which means it can support features like masking, clipping, patterns, full gradients, groups, and more.

 

 

Another feature of Snap is its ability to work with existing SVG.  According to its website:

That means your SVG content does not have to be generated with Snap for you to be able to use Snap to work with it (think “jQuery or Zepto for SVG”).

It gives you the freedom to create SVG content using tools like Illustrator, Inkscape, or Sketch then manipulate it using Snap. As the website explains:

You can even work with strings of SVG (for example, SVG files loaded via Ajax) without having to render it first, which means you can do things like query specific shapes out of an SVG file, essentially turning it into a resource container or sprite sheet.

Support for animation is another important feature. Snap lets you create  more interactive and engaging SVG content using a "simple and intuitive" JavaScript API. Its mascot is a snapping crocodile and if you want to see it in action clicking on the graphic will take you to an interactive version on the Demos section of the site.

 

For an open source library this one is well documented. It has an 18-step slideshow to walk you through the steps to create a simple but convincing animation:

 

snapgetstarted400

(click to access slideshow)

 

Alternatively you can view the short tutorial provided by the short (and snappy) Getting Started video:

 

 

You can download Snap.svg from its website or if you want to clone or fork it you can do so from GitHub.

 

snaplogo

 

More information in our Getting Started With Snap.svg article.

More Information

Snap.svg

Snap.svg on GitHub

Adobe Releases Snap.svg Open Source Project to GitHub

Raphaël

Related Articles

Getting Started With Snap.svg

SVG, JavaScript and the DOM

Getting started with SVG for HTML5

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

 

blog comments powered by Disqus

 

Banner


Microsoft Research Silicon Valley Axed
19/09/2014

As part of its program of layoffs, Microsoft is closing its Silicon Valley Research Labs with the loss of 50 jobs. The Trustworthy Computing Group is another victim of the cuts.



LiquidFun V1.1 Runs In A Browser
28/08/2014

We reported on Google's LiquidFun V1 earlier in the year as, as much fun as you can have without actual liquids getting involved. Now we have LiquidFun V1.1 and you can have as much fun in a browser.

 [ ... ]


More News

Last Updated ( Thursday, 07 November 2013 )
 
 

   
RSS feed of news items only
I Programmer News
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.