20100730 Renamon SVG Trace

If there's one thing I can't do, it's art. Occasionally I can make some cool abstract design by accident, but if I set out actually trying to draw something, the perspective is just going to be all wrong and I'll ultimately end up with something that's logically correct, but just looks wrong for some reason.

However, I can trace art. Some would call this cheating, but I don't just trace over something and call it my own. What I like to do is take some existing art and trace it in Inkscape to make an SVG version. This is because SVG has a number of advantages over bitmap graphics.

SVG is Scalable Vector Graphics. Vector means there are no pixels. The images are made of objects and layers composed of (often curved) lines and points. Essentially, it's instructions and math that tell the computer how to draw the individual components of an image and put them together.

The result is that SVG images can be scaled to just about any size, and they'll remain crisp and smooth - rather than having to try to stretch and compress pixels, it simply re-renders the image, throwing some multiplication into the process.

Being object-based gives SVG some neat capabilities. Objects can be moved around or turned off to reveal things behind them, scaled, varied in opacity and colour, and transformed in various other ways easily. This makes it easy to modify images as you like (especially if they're designed with this in mind). You can take a character and add alternate outfits, facial expressions, poses, etc all in one file.

Further, SVGs can be styled with CSS and scripted with Javascript. So by changing one rule you can change a person's skin, hair or eye colours, the background, etc. Scripts allow for advanced animation and even games. A lot of Flash content can be reproduced in pure SVG. (Add in HTML5 and you basically replace Flash entirely!)

The only downside is lack of support. Inkscape doesn't support CSS, and browsers render much too slow (especially if any blurring is used, which is important for shading) to really make games feasible. These problems are slowly being resolved. Even so, SVG is pretty sweet.

Anyway. Enough chitchat. Here's my trace of Renamon - original vs SVG.

Sweet, no? And it scales. Zoom that shit in. I'd stick a zoomed-in version here but it seems like there's no way to do that without modifying the image. (Yo, HTML5 guys, what gives?) In Firefox (probably every browser) you can just view the image directly and zoom like you would any other page. It scales up beautifully until you can actually see the eyes. How awesome is that.

Also, here's a nice gradient-shaded version.


I've got more of these. Stay tuned.