SVG Libraries as of November 2013

Support Vector Graphics (SVG) allows us to create vector images on the browser. Support is pretty good on modern browsers. The difference between Canvas and SVG is best described on Wikipedia. Interacting directly with the SVG document object model (DOM) sounds like a nice low-level computer science thing to do but in industry, it's best to use libraries constructed by others to take over some of the heavy lifting.

TLDR; I'm going with Snap.svg. It's new but based on a mature library.

This is a round up of the best three libraries I've found as of November 2013.

jQuery SVG

jQuery SVG by Keith Wood is a series of extensions to the jQuery framework for handling SVG. jQuery works brilliantly for working with a DOM, so it is only reasonable to assume that SVG (which uses a DOM) should also be suitable for jQuery too. The documentation is good, there is a community and plenty of examples.

The syntax for building and animating is sensible:


Working Example. My concern with jQuery-SVG is that the last update was in April 2012, for jQuery 1.7. This does not feel like a project that has someone owning it under active development.

Raphael

Raphael by Dmitry Baranovskiy is a well established SVG library that acts as an abstraction in front of SVG and VML (used in IE6 and 7). If you need to support older browsers, it's the best choice. The problem with supporting older browsers is that it is very difficult to implement modern SVG functionality and still support IE6 and 7.

The syntax for building and animating a rectangle is neat too:


Working example. For my project, supporting older browsers is not a requirement. Raphael is still well supported and there is documentation, but I didn't get on well with the docs: I needed more concrete examples of use of the various elements and how they fit together. That's a matter of taste, you might get on better.

Snap

Snap.svg is also by Dmitry Baranovskiy and is supported by Adobe (since Dmitry was hired by their Web team - fair play!). Snap shares a lot of code with Raphael and is identical in places. Snap drops support from IE6/7 and is lighter for it. The interface is much like Raphael.

The interface for building and animating is simple:


Working example. The current version of the Snap framework is 0.1 and usually this would set off alarm bells. I am not concerned in this case as Snap is based so heavily on Raphael that it brings with it a long history and support community. Snap is going to be my choice.

Not d3.js?

D3.js is an excellent library for representing data. Although it does have a nice API and a framework, I do not need the data visualisation pieces, I just need a lightweight layer over the top of SVG. I am sure that D3 can be used in that way but I think that it not meant for that.

Other Libraries

SVG Web is not updated enough. Processing.js is great for data visualisation but not quite what I needed. Dojo looks light on support and I can't find out how often it is revised. SVGKit has a bunch of libraries and is cross-browser but appears to be rarely updated. Plotkit looks neat but last updated 2006. Pergola is all about building whole apps in SVG, which is a sledgehammer for my particular nut.

Further Reading

• Far In Space - Top SVG JS Libraries worth looking at
• HTML Rocks SVG Primer