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

FEATURE

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
  39.72%
Yes, but in a few years
  37.59%
No
  22.70%
Out of 141 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.


PROFILES & BIOS

WIA Profile: Samantha Brown

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »

Xgen Products Celebrates 7-Year Anniversary

In August, Xgen Products celebrated its seventh anniversary with a special promotion. The winner of Xgen’s Lucky 7 raffle, Xgen announced in late July, would win a three-day, two-night trip for two... More »

WIA Profile: Kristi Greer

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »
XBIZ NEWSLETTERS
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.






POPULAR PRODUCTS & SERVICES
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.

UPCOMING EVENTS

eroFame

Oct 05 - Oct 07
Hannover, Germany

EXXXOTICA Edison

Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA
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!