Sunday, November 4, 2012

SVGs and Me

I've begun the process of switching all my silhouettes to vector graphics.  I knew from the start that svgs were an algorithm that allowed for resizing a picture without losing quality, but a lot of vector graphics I've seen, and the earliest ones I produced myself, had an over simplified, computery-smooth look to them.  I hated that look.   I wanted as much detail as possible.  So I just made the best pngs I could.  Usually painstakingly tracing by hand.

Working with the variety of source materials that I do-- everything from photos to watercolors-- it's hard to get a clean, crisp outline sometimes.  The quick and dirty way to make silhouettes I showed in a post a long time back (what Roger recently posted is actually quicker) often gave me jagged edges I didn't want or was just impossible with the source image (like many photos).  But in focusing on png silhouettes, even they turned out to be unsatisfying in the end, if, for example, the source image was too small or I needed to change a silhouette's size in use.

Long story a little shorter, I've played around enough with Inkscape to be pleased with the results of tracing bitmaps into vector graphics and vice versa. This has allowed me to actually work faster on some pics; the quick and dirty method gives me a ragged image and turning it to an svg does all the smoothing work for me.

Anything with a strong outline is easy to work with.  The dogs from the previous post were mostly Pearson-Forman dictionary pictures and probably took me ~30 minutes to do the lot.

A few times, like this snake:

I've bounced back and forth between vector and raster, getting the advantage of the vector's smoothness, but then fixing the spots it over simplified in Gimp before retracing.

I love this picture of two camels carrying a  palanquin, but it is pretty small and would have taken me hours to hand trace:

I was able to make this:
with out too much effort by quickly preparing it and then having Inkscape trace the bitmap.

Some of the nooks and corners in these examples still look a little over-smoothed to me, but seeing as I would have spent a lot of time on these-- if not skipped making them into silhouettes altogether-- with my old methods, I'm happy to have them at all.

Of course, you aren't even looking at svgs, because blogger (and most browsers?) can't handle them, so I had to convert back into pngs.  That will be an extra step if I want to show you what new svgs I've added to the collection, but I guess that's fine.  These were always meant to be useful tools and I feel a little ashamed if the pngs were subpar all this time.

There are still some images I'll have to hand trace, if I can salvage them at all.  You might wonder why I mess with photos or images so small.  I often have specific images in my head I'm looking for, like the archetypal safari porter and since I can't draw them, I go looking for them.  I suppose it's similar to collage.  Anyway, it is incredibly hard to find images of some things in the public domain so I often have to settle with the best match I can find.  Here are some examples:

These gentlemen fit the bill perfectly.  Sometimes I use contrast and adjusting the levels of black and white to make lines more apparent, but in the end, I usually just eyeball it.  Sometimes after an hour of work there just isn't enough detail for it to be distinguishable as an image of what it is.  I have a lot of failed silhouettes in folders on my computer.  I haven't given up on these two yet, but we'll have to see.


  1. Mmm nice. I'll have to get into that tech sometime. I fear that fitting my 300+ silhouette library to the 250 pixel maximum of Hexographer has created certain distortions.

  2. You've been busy! I was just looking through your sils the other day. I'll put up a tutorial on what I figured out through trial and error. Inkscape's help documentation wasn't helpful. It suggests . . . trial and error.

  3. Thanks so much—both for explaining your process and for making the silhouettes!

  4. My pleasure. Stay tuned for more on how I traced these into vector graphics.