Vector graphic mayhem

I've always preferred open source image editing application GIMP over Photoshop. Not sure why, but I think it has something to do with Adobe trying to do too much for me. GIMP just works for me, and I've used it to do lots of design, such as much of the graphics on this blog (as you can see, I still have a lot to learn).

A few years ago when I was designing the 6th Density logo, I had the hardest time creating and manipulating geometric shapes. I eventually had to just eyeball it and hope that it would work out. Painstaking pixel editing and trial and error ended up paying off, but the logo I came up with was really stuck at one scale. I couldn't really shrink or expand it too much without pixellating it to all hell.

I had heard about vector graphics (.svg files), an image format that saves shapes, paths, and other more geometric data about images in an XML file rather than a map of pixels, but I didn't have Adobe Illustrator and didn't know where to begin anyway. However, as I'm about to launch my business and I want to use all that imagery, I decided it was time to either hire out the design work or figure it out.

My friend, CVREG colleague, and frequent code buddy Matt Overstreet heard me complain about the problem and started researching it at one of our code and coffee jams. After an hour or so he had whipped up a surprisingly good version of the logo by reading online documentation and playing around. And get this - he hacked out the XML file by hand, and did something cool where he created a template pentagon-like shape and rotated it around to form my logo. I knew this was too good to ignore, so I started learning it myself.

After some borked attempts, I finally banged out a SVG version of my logo using an open source version of Illustrator called Inkscape. My efforts had yielded a vector graphic which I could expand or shrink at will without losing any detail. Then I could just render the correctly-sized instance into a normal PNG, JPEG, or GIF - or leave it as a piece of XML code in an HTML file (most browsers can see SVG files, which opens up some interesting possibilities for dynamic web applications). However, it took so much time that I put the vector graphic foolishness down for a while.

Fast forward to today, where I was sick and tired of rewriting SQL queries for one of my Rails apps. I decided I'd see how easy it was to convert the ALL logo into a vector graphic. It was surprisingly straight forward - I followed this tutorial, moved some path points around, and voilla - a vector graphic. I also created a version with the design in a white and red circle. I couldn't figure out how to render the SVG XML files inline, so what you see are PNGs, but they link to the SVG files. You should be able to open them up in any professional image manipulation program and do with them what you will.

Standalone Version"Circle-A" Version
Read this article
Written on Monday, April 14, 2008
blog comments powered by Disqus