Welcome to 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. The API is inpired by and uses MochiKit

SVGKit (live demo, type tests) -- All you need to work with SVGs at the basic, browser-independent level. Create a new SVG at runtime. Load SVG data from a URL. Conveniently handle quirks of three ways SVG can be included in browsers: object, embed, and inline. Handle different browsers and different SVG engines. Has convenience functions for DOM manipulation ala MochiKit. It manages the internal SVG DOM objects: HTMLElement, SVGDocument, SVGElement SVGKit
SVGEvent (live demo) -- Additions to the SVGKit object for event handling. In SVG it can be tricky to get from mouse coordinates to local coordinates. SVGEvent has routines to enable draggable items, rotatable items, and to prevent pan and zoom on items.
SVGCanvas (live demo, live demo 2, canvas extensions) -- Implements most of the Canvas API. Some SVG-specific additions can be added if you also include CanvasExtensions.js. Allows you to create an SVG more prodecurally rather than building it up with DOM manipulation (one of the disadvantages sighted by Vladimir Vukićević) The unimplimented parts of the Canvas API are things like "take what you've drawn so far, treat it like a bitmap, and run the following filter on it." Some of these are impossible in SVG as it stands, but will get better with SVG1.2. SVGCanvas
SVGPlot (live demo, csv demo) -- A full plotting suite. It generates clean SVG in the browser that can be saved, sent back to server for conversion to PDF, PS, PNG, etc. Live updates via AJAX for real-time data like stocks or web stats. Allows multiple plots arranged on an SVG, multiple related or unrelated axes per plot, and control of styles. Originally I was going to write it in pure Canvas code so you could have either underneath, but things like text made it too frustrating. For a related but independent project, see PlotKit. We seem to have started around the same time, but he has a more production quality release. SVGPlot
SVGLaTeX (live demo) -- Generate SVGs from LaTeX equations with a server-side CGI script. This script can be called from JavaScript to stick the result in a client-side SVG. SVGLaTeX
SVGFontKit (font_test.svg) -- This is a hack to replace all SVG <text> and <tspan> elements that reference an embeded SVG font with references to the font's glyphs properly positioned and spaced. This hack is necesary because Firefox lacks support for SVG Fonts, and currently <text> elements are rendered and sized according to the rest of the web pages's fonts rather than pixel-perfectly anti-aliased as demanded the SVG spec seems to require. SVGFontKit

Getting Started

MochiKit , Dojo, and other libraries.

I chose to require MochiKit and use it extensively because it really does "make JavaScript suck less." I'll admit I haven't used the library to its full capacity and welcome any suggestions on how to improve this. I'd be perfectly happy to do what is neccesary to make my library more MochiKit friendly, perhaps even being included in MochiKit if SVG becomes important. Dojo already includes a simple SVG Chart widget.


I'm Jason Gallicchio, a physics graduate student at Harvard working on theoretical particle physics and cosmology. I developed this as a graphics and plotting interface for my mostly Java-Applet educational site BrainFlux.org and also for the web interface to our Optical SETI experiment. I looked into SVG and played around with Batik a bit. Then one of my research groups implemented a full web app using Python, TurboGears, and MochiKit. We wanted to interactively pull data out of a web page and plot it. Also we wanted a Google Maps type interface for stars. I started working on this in January 2006 off and on.

Things I want to do with it


Open Source License

Projects that Use SVGKit


Other Links

SVG Complaints/Outlook:

Adobe's Plugin is way ahead of Firefox in terms of a completeness, speed, and interface features (like zooming, viewing the SVG in its own window, and viewing the SVG source.)

Fonts are a huge problem. The SVG spec is written so that you can embed a font and use it so you get precise alignment and pixel-perfect anti-aliased rendering. When you're rendering axis labels, I query the exact dimensions of the resulting text for optimal placement. None of this works (very well) in Firefox yet. Unline TrueType, SVG fonts don't support hinting (the mechanism that says "render the resolution independent path for the letter A ten pixels high, but then flip the following pixels because it'll look better that way). SVG creation programs have to manually lay out glyphs and will never have great low-resolution output.

Sounds and video. This is more of a JavaScript problem, but I'd like to give it .wav and .mp3 files to play, and be able to generate raw wav or mp3 data programatically and send it to be played (for a Fourier synthesis program, for example.)