8 SVG tools for jazzing up the Web

Developers have a host of powerful options for getting the most out of the popular Scalable Vector Graphics spec.

karlkotasinc

8 SVG tools for jazzing up the Web

SVG (Scalable Vector Graphics) and JavaScript on Canvas are becoming the tools of choice for Web developers looking to inject animations into their apps and websites. SVG provides a language for describing two-dimensional graphics in XML; version 2.0, currently under development at the W3C, aims to improve SVG’s usability and add a host of features.  

“The inclusion of SVG as part of HTML5 and the addition of SVG rendering support in IE9 has resulted in a dramatic increase in interest in SVG,” says SVG advocate Tavmjong Bah. The emergence of retina displays has also fueled SVG’s resurgence, says Arno Gourdol, senior director of product development at Adobe, because the vector-based drawing format suits different screen resolutions.

Here are some important tools for using SVG.  

Apache Batik

Batik is a Java-based toolkit for displaying, generating, or manipulating images in SVG. Batik provides graphic capabilities that can be described in text, says Clay Leeds, a developer at The Orange County Register and an Apache committer. “If you do it in text, then the amount of data you are transferring, for example, wirelessly is small.” The project also features the Squiggle SVG browser, which Leeds says “works great.”

While there is not much new development on Batik lately, “it’s still being upgraded, and there’s still people that use it,” says Leeds.

Adobe Snap.svg

Just introduced in October, Snap.svg is an open source JavaScript library available on GitHub. Web designers and developers can use Snap.svg for animating and manipulating SVG content, offering capabilities like full gradients and masking.

The library complements Adobe’s Edge Tools and Services and provides drawing and graphics capabilities for browser experiences. Developers can build applications, such as information graphics, based on live data.

“Snap.svg is a JavaScript library that you can use in your website that’s going to make it easier to manipulate the SVG graphics that you have already created or that maybe you can create from scratch,” Gourdol says.

Adobe Illustrator CC (Creative Cloud)

Adobe Illustrator is a powerful vector graphics program that can be used to build and output SVG content. Illustrator provides a default set of SVG effects. Developers can use effects with default properties, edit XML code for custom effects, or build new effects.

Default SVG effects can be modified via a text editor. A scripting language can be used to extend functionality to an SVG file, according to Adobe.

Corel CorelDraw

CorelDraw is a tools suite for 2D graphics design, photo editing, and page layout, as well as development of SVG files and website design. “You can also open SVG files and edit them and save [them] back to SVG,” says Gerard Metrailler, senior director of product management for graphics products at Corel. The suite supports more than 100 input formats in addition to SVG.

Inkscape

Inkscape is another vector graphics tool that supports SVG. Developers can build illustrations, icons, logos, diagrams, maps, and Web graphics using the SVG file format. It has capabilities similar to those of Adobe Illustrator and CorelDraw and supports SVG features, such as markers and alpha blending.

“Inkscape provides an easy-to-use interface for creating complex drawings,” says Tavmjong Bah, who represents Inkscape at the W3C. While Inkscape supports most of the SVG 1.1 standard, knowledge of the standard is not directly required. Inkscape can edit SVG files built with other editors or by hand. JavaScript code is preserved. A major upgrade of Inkscape is planned for the very near future, Bah says.

JXSGraph

JXSGraph is an open source cross-browser library implemented in JavaScript and hosted on GitHub. It supports interactive geometry, function plotting, charting, and data visualization in the browser. It uses SVG, VML (Vector Markup Language) and Canvas.  

“JSXGraph is a library to enable interactive mathematics visualizations in the Web browser, mostly but not restricted to educational purposes,” says JXSGraph co-developer Alfred Wassermann. “The topics range from elementary (points, lines, circle) to advanced (simulation and solving of differential equations).”

The technology was developed at the University of Bayreuth, in Germany. With a footprint smaller than 100KB, it requires no plug-ins and supports a variety of platforms, including Apple iOS, Google Android, Mozilla Firefox OS and Windows 8.

Raphaël

Raphaël is a JavaScript library intended to simplify working with vector graphics on the Web. It uses the W3C SVG recommendation and VML as a base for developing graphics. Every object built is also a DOM object, enabling further modification or the attachment of JavaScript event handlers.

“Raphaël gives you the ability to draw in any browser from IE6 to the latest Chrome. SVG only works in IE9 and onwards,” says Dmitry Baranovskiy, a senior computer scientist at Adobe. Raphaël is intended to provide an adapter to make drawing vector art simple and compatible across browsers.

SVG-edit

SVG-edit is a Web-based JavaScript-driven SVG editor for working with modern browsers. “I’m pretty sure it is the free and open source Web-based editor with the most features,” says project administrator Marc Laporte, a Web developer.

Among SVG-edit’s many features are free-hand drawing, raster images, wireframe mode, UI localization, and viewing and editing an SVG source.

Related: Graphics market to grow and spawn employment opportunities