SVG Joy Part 1

My latest project has involved the funky image technology, SVG.

SVG, for those uneducated out there, stands for Scalable Vector Graphics. Perhaps you are already familiar with vector graphics? Programs out there like Corel Draw and Visio use vector graphics to enable drawings that scale to any resolution.

SVG is a technology that allows the use of vector graphics in all sorts of place such as web browsers and even desktop icons.

SVG allows funky things like animation and scripting with javascript which means making funky images that animate is now available to all of us that never learned flash!

So thus I have been playing with SVG trying to get something working that could use as a network bandwidth meter (similar to Cisco OpenWorks if anyone has seen that).

So far I don't have much but it's a start.

The concept I am working with is to create a graph similar to a cars speedo in SVG and then use javascript to update the needle according to a particular network switches bandwidth usage. So far I have managed to only get a ring of boxes drawn and even that was tricky.

I am using firefox 2.0 and it turns out that if you do something wrong in javascript it will just stop executing and not report any errors at all. Which makes debugging very difficult. But I eventually got there to the result you can see down that link. The link should work in firefox 2.0 or IE 7.0 both of which have basic SVG support built in.

I will keep you updated on how it all goes.