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.
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.
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.
