Finding out about SVG

July 19, 2012

I’ve always dismissed SVG as something none-interesting, a format intended to render vector graphics for the user, nothing more, nothing less.

Well lately, I came into contact with SVG, and I was mildly surprised that the SVG format is actually an XML container. All the data within an SVG file is simple XML markup.

Looking into it more closely, I found something that blew my mind. Not only can you generate SVG’s from your server side script (because it’s xml), but you can also embed javascript into it, getting your own DOM tree that you can modifiy internally during runtime. Now that’s something I’m getting pretty excited about, how come I haven’t noticed this earlier?

The big thing about being able to not only pre-render stuff from the server, but also adding logic to the image means that you can create something more contained with more features than flash ever could.

When using flash, after you’ve coded it and exported the swf, if you wanted to use dynamic data, you had to fetch the data either through an external XML file (with the swf residing on the same domain or using a shim)¬†or then you had to communicate with javascript through externalInterface. None of the solutions are really practical if you want a user to be able to share the data (Using the file on his/her own domain/server).

With SVG you can instead generate the file, on the server, embedding all the dynamic data into the file itself (e.g. base64 encoded bitmap images, javascript markup, dynamic string data and so forth).
Which in turn means that the only thing the user has to share is one single file opposed to embedding not only the swf but also the xml/javascript/image/whatnot.