eWEEK content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Adobe Systems has released a new, free open-source JavaScript library called Snap.svg on GitHub for Web designers and developers working with Scalable Vector Graphics (SVG).
Snap.svg is a powerful and intuitive API for animating and manipulating SVG content, offering capabilities such as masking, clipping, patterns, full gradients and groups to make content more interactive and engaging.
The new library complements Adobe Edge Tools & Services and supports rich drawing and responsive graphics capabilities needed to deliver beautiful experiences on today’s modern Web browsers, Adobe said.
Released under an Apache 2 license, Snap.svg was written entirely from scratch by Adobe engineer Dmitry Baranovskiy, who also authored Raphael, the de facto library for working with SVG on browsers all the way back to Internet Explorer 6.
Raphael is a small JavaScript library that can simplify developers’ work with vector graphics on the Web. If developers want to create their own specific chart or image crop and rotate widget, for example, they can achieve it simply and easily with this library. Raphael currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. However, unlike Raphael, Snap.svg supports modern browsers, including Internet Explorer 9 and up, Safari, Chrome, Firefox and Opera.
SVG is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape. Inkscape is an open-source vector graphics editor, with capabilities similar to Illustrator, CorelDraw or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.
All major modern Web browsers—including Mozilla Firefox, Internet Explorer 9 and 10, Google Chrome, Opera and Safari—have at least some degree of support for SVG and can render the markup directly.
“Adobe is passionate about creativity and advancing the modern Web,” said Vincent Hardy, director of Web platform engineering at Adobe, in a statement. “We have done extensive work on new technologies like Snap.svg that address the ever-changing needs of designers and developers so that their work can reach the largest audience across browsers.”
Snap.svg encourages the creation of code that is clean and easy to maintain, making it an excellent API surface for tools that require support for responsive graphics and powerful drawing capabilities such as Edge Animate, Adobe Flash Pro CC, Adobe Illustrator CC and Adobe Photoshop CC. It also works with existing SVG, which means developers can reuse patterns from previously created content or make that content interactive.
“At PBS KIDS our mission is to create engaging content that will educate, inform and inspire kids,” said Chris Bishop, creative director for PBS KIDS, in a statement. “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 quality.”
In addition to being dedicated to building Web tools and services for Adobe Creative Cloud members, Adobe is also a longtime contributor to Web standards and open-source projects, which it views as critical in order to help build a more robust and expressive online surface for Web designers and developers.
Adobe initiated creative vector graphics for the Web with SVG, which are now critical in a world of high-resolution devices. Other contributions to Web standards and the open-source space include: work in typographic Web layout with CSS Regions, recently implemented in the new iOS7 release for mobile Safari; Web GL, Blink and WebKit; CSS Filter Effects, CSS Shapes and the new open-source CSS library called Topcoat; the new HTML5-based, open-source Web design and development editor called Brackets; and Cordova for building native mobile applications using HTML, CSS and JavaScript.