Top SVG Javascript Libraries Worth Looking At

Learn about SVG and simplify your work with Canvas/VML with these top Javascript SVG libraries you can use in your projects.

I read a great article this morning about SVG (Scalable Vector Graphics), its current state on the web and how to use it. If you’re even a slight bit curious about SVG, it’s really a great read.

So I got to wondering how many Javascript SVG libraries/frameworks are out there… Well nothing that a good google search and some looking around couldn’t cure.

Here is what I found… if you know of any JS SVG API I have not mentioned please, please let me know.

SVG Javascript Libraries

1. Raphaël—JavaScript Library
   Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. It’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
2. svgweb
   SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base.
3. Processing.js
   Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. Processing.js is explicitly developed for browsers that support the HTML5 <Canvas> element. Processing.js runs in FireFox, Safari, Opera and Chrome but will not be supported in Internet Explorer until Mircosoft catches up.
4. dojox.gfx
   dojox.gfx (GFX) is a cross-platform vector graphics API. It loosely follows SVG as the underlying model. GFX helps to isolate your application from the many native vector graphics implementation differences across all modern Browsers.
5. ExplorerCanvas
   Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
6. SVGKit
   SVGKit is a collection of JavaScript libraries for painless client-side SVG manipulation: SVGKit provides browser-independent access, SVGCanvas implements Canvas API, and SVGPlot plots/graphs data and functions.
7. PlotKit
   PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.
8. JSDrawing
   JSDrawing is a client-side JavaScript library that allows you to render vector graphics independently of browser and platform. The rendering API is based on SVG’s path commands and adding support for new renderers is very simple.
9. VectorGraphics
   This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you don’t have JavaScript experience.
10. jQuery SVG
    A jQuery plugin that lets you interact with an SVG canvas.
11. PERGOLA
    PERGOLA is a JavaScript framework and library using SVG, designed to provide developers with a powerful tool for building web applications, User Interfaces, presentations and more (the framework requires a license)

Learning More About SVG

• Mozilla SVG Project
• SVG DOM Reference
• Canvas tutorial
• Inline SVG
• Scalable Vector Graphics (SVG) Specification