So something a little different today, I had a flight of artistic fancy and thought I would have a play with some vector graphics. Inkscape is the premier open-source vector graphics editor, so that seemed like a logical place to start and for some relatively simple subject matter I tried knocking up a couple of characters from a cartoon I am quite fond of, Invader Zim.
Invader Zim, for the uneducated, is a cartoon about an incompetent alien who was sent to earth. Essentially this is to get him out of the way of his people, but he believes he is here on some sort of advance scouting mission ahead of a full scale invasion. He is accompanied on this mission by his robot sidekick Gir. Zim, who is exceptionally short and from a culture that values height about all else, attends school disguised as a human. Gir disguises himself as a rather unconvincing dog. I have picked to draw, Invader Zim, in his natural alien form and Gir in his super convincing dog disguise.
I am placing these two pictures under a Creative Commons Attribution License Version 3.0, which basically means you can do what you want with them as long as you give me credit for making them. The original vector files are available here: Zim, Gir.
Along the way I discovered that embedding SVGs and scaling them can be a bit of an annoyance. It seemed like an object tag would be the best way to embed an SVG, however changing the height and width would add scroll bars rather than scale the image. A bit of searching located this rather handy article, which describes how to modify an SVG to allow scaling. Unfortunately, as of writing this doesn't appear to work in Chrome. It does work perfectly in Firefox and I haven't tested Internet Explorer or Opera. I then discovered that SVG arn't even natively supported in Internet Explorer 8, which is the latest version available on Windows XP. So in absence of a more generic solution I just ended up using a PNG to render the images on the page.