Inline SVG experiment

I don’t do a lot of front end development these days, being mostly concerned with crunching big data on Hadoop, but I do keep an eye on developments in browserland.

One of the interesting developments to come with HTML5 is inline SVG, i.e. the ability to render a vector graphic in a page, whose definition is part of the page. That’s right, the SVG markup is part of the page markup, no separate file is required.

My use case for this is as follows – one of the systems I work on does a bunch of complicated calculations and then sends a report in email when it’s done. The report is marked up in basic HTML, but I would like it to include some graphs – without having to set up a web server or linking to external images.

Turns out this is easy when both your HTML and SVG is XML. Here’s a simple example. Notice the SVG subtree is just embedded right there in the HTML. Also note that we’re careful to conform to proper XML structure here.

Which appears as follows. If you are using a good up-to date browser like Chrome or Firefox 4, you should see a bunch of concentric circles here:

Nice! So obviously you can go to town and put as complex an example as you want right there in your document, you could even use a program like Inkscape to draw fancy graphics like these examples.

Taking this to the next level to draw a graph inside a HTML email is pretty straightforward if you can read the SVG spec or spend time with some tutorials, so I won’t go into the gory details of that, suffice to say that some experimentation in this area finally yielded the following image:

Free Tomatoes2010/06/012010/06/022010/06/032010/06/042010/06/052010/06/062010/06/07050,000100,000150,000200,000250,000300,000

The commands to generate this image are as follows:

Of course, there’s a lot of repetition going on here, and even if this was going to be programmatically generated, it’s still a bit of a pain. So in the interests of Don’t Repeat Yourself I decided it would be nice if I could do this in JavaScript. A graph could be specified with some minimal JSON, and transformed into some SVG to be inserted directly into the page structure. The JSON for the above graph would look like this:

That’s pretty minimal. The x/y pairs could be more minimal, but leaving them this way leaves the door open to easy future expansion with additional data series and graph types.

Anyway, the JavaScript code to turn this JSON graph spec into a bar graph is pretty straightforward. It mostly involves assembling DOM elements into a suitable tree. All the gory details are wrapped up into a single object called Graphing which has a single public method generateBarGraph, which takes one of those JSON specs and returns an SVG DOM element tree which you can insert into your document with ease.

And finally here’s an example of using the above JavaScript separately from the HTML which uses it.

Good deal. Probably can’t do all the fancy JavaScript stuff in email, though. Still, I’m sure I’ll get some use out of it. It made for fun experimenting, at least.