SVG == Awesome

SVG images aren't new, and I've known about them for quite sometime. In case you're not familiar with them, they're a scalable image format composed of XML to describe the image. I've always been curious about them, but never really had a use for them until now. Right now, I'm working on a new website project (website software specifically designed for web comics), and I decided I'd poke at creating SVG images for the hit chart that illustrates how many hits on a daily basis the site gets.

Looking at the SVG tutorial at W3Schools.com, http://www.w3schools.com/svg/default.asp , I was able to create some test PHP code that works amazingly well and is almost perfect for my needs on my first attempt! The image below is using random data, so don't read anything into it; blue bars represent the visits/hits each day, while the light green bars represent the new visitors on each. Like I said, all the data (except the days of the week) is completely randomly generated with each loading of the image.

Well, I HOPE that comes up for you; I'm still learning after all. If it doesn't, just visit http://www.raymondrodgers.com/svg.php to see the image. The point I'm trying to make here, is that the format is super simple to work with from a programming point of view. There's little or no binary data to generate, just a matter of figuring out how to breakdown the desired output into various XML tags with attributes. And then you're done.

I figured out the logic for this test/demonstration code in under 10 minutes. While it's not doing everything I'll want it to do in my project, it's a hell of a lot better than poking around with GD trying to get everything just right, and hoping that the image is properly generated. Oh, by the way, all modern browsers can use SVG exactly like I am presenting it here, as an image tag, and those that support HTML5 even have a SVG tag built into the browser, so that the XML can be included directly in the page without an IMG tag. I love SVG!!