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:
The commands to generate this image are as follows:
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.