Home > Features > Dev Depot: Snap.svg, Create Interactive Graphics • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Snap.svg, Create Interactive Graphics

Dev Depot: Snap.svg, Create Interactive Graphics

July 31, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" Source agnostic, designers can not only generate SVG images with Snap, but can also use Snap to work with SVG files that were previously created using popular design tools such as Adobe Illustrator, Inkscape and Sketch. "

An open standard under development since 1999 by the World Wide Web Consortium (W3C), Scalable Vector Graphics (SVG) offer a mature XML-based vector image format for easily creating and displaying rich web graphics, which support both simple interactivity and two-dimensional animations.

According to Wikipedia, because SVG images and behaviors are definable through XML text files, they can be searched, indexed, scripted, and compressed; allowing SVG images to be created and edited using a plain text editor — although they are more often created by using specialized drawing software.

Supported to one extent or another by all major modern web browsers, SVG images are enjoying a renewed popularity as web designers seek better ways to create responsive imagery and animation that is suitable for all screen sizes — including smaller mobile devices with less powerful graphics processors.

This migration has spurred the development of a new generation of toolsets for working with SVG, including Snap.svg (www.snapsvg.io), which calls itself “the JavaScript SVG library for the modern web.”

According to its publisher, SVG is an excellent way to create interactive, resolution-independent vector graphics that look great on any size screen, with the Snap.svg JavaScript library making working with SVG assets “as easy as jQuery makes working with the DOM.”

Snap’s developer notes that while the most popular library for working with SVG is Raphaël because it supports browsers all the way back to IE 6, supporting so many browsers means that Raphaël can only implement a common subset of SVG features. As a result, Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy) who designed it specifically to take advantage of the capabilities of modern browsers; such as masking, clipping, patterns, full gradients, groups and more — injecting life into SVG images through a rich animation library and easy event handling.

By providing a simple and intuitive JavaScript API for animation, Snap helps make your SVG content more interactive and engaging, while delivering the fashion forward appearance so desired on modern websites and mobilized web apps.

Source agnostic, designers can not only generate SVG images with Snap, but can also use Snap to work with SVG files that were previously created using popular design tools such as Adobe Illustrator, Inkscape and Sketch.

It is even possible to load strings of SVG asynchronously (for example, SVG files loaded via Ajax), and then query out the pieces that are needed in order to turn a collection of SVG files into a resource container, sprite sheet or other asset — providing a great deal of power and flexibility.

Need another benefit to using SVG? Google indexes these files both individually and within HTML, providing unique opportunities for marketers targeting the search giant and Google Image Search traffic.

Available under an Apache 2 license, Snap.svg is completely open-source and completely free to use. Comprehensive documentation featuring numerous examples makes getting up to speed with Snap.svg, well, a snap. Give it a try and see if you can take your web graphics to a new level of sophistication with this innovative JavaScript library — and maybe grab some extra traffic for your site as well.


Randazza: Trump Victory, Big Prop 60 Win

On Tuesday afternoon, I boarded a transatlantic flight. Given all of the negativity in the 2016 presidential race, I was delighted that I would be absent for the results. I found both Donald Trump and... More »

Dissecting an $11.9M Affiliate Marketing Judgment

The Federal Trade Commission scored another major win in early October when the 2nd U.S. Circuit Court of Appeals upheld a lower court ruling, requiring LeadClick Media LLC to pay an $11.9 million award. The... More »

Legal Protection for Amateur Shoots

Any adult industry professional who creates video content with actual first-time amateurs will come to an early knowledge that later performer regret is commonplace. Recognized performers who regularly... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Access the latest issues of the industry's leading trade publications in digital form. View online or download for offline viewing.


Everything To Do With Sex Show

Jan 27 - Jan 29
Halifax, Nova Scotia

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!