Convert Pen Drawings to SVGs

Post

January 4, 2024

My two favorite programming books _why’s (poignant) Guide to Ruby and Crafting Interpreters heavily feature their respective author’s art. I want to emulate people who’s work I admire and add some (less artfully excuted) doodles to my notes.

Buying a Wacom tablet is probably the best way to start doing that. Used Wacoms are cheap on eBay and they are designed for the task. I prefer pen and paper though, so I started brain storming some ideas on how I could take photos of my scribbling and turn them into SVGs

Here’s a tour of the python script I wrote. This is a no budget, high jank solution because I have no background knowledge in image processing.

I’ll show different variations of this image through the post:

First we’re going to bring in a couple classes from PIL and svgwrite, set a configuration value and grab the size as well as the data from the pixels in the image.

I want to know which parts of the image are ink and which are paper, my drawings are mostly paper and only a little bit ink. Knowing the what the average will help me divide my pixels into “ink” and “paper”.

Now that I’ve got the average pixel value, lets find the distance each pixel is from the average:

Let’s create a new image where the pixels that have ink are set to white and the pixels that aren’t are set to be black:

Here’s the output - looks pretty good!

In some of my tests I noticed that their could be some noise in the image - so I added a tiny amount of blur which seemed to fix it.

Now I’ll build my final output - an SVG where the ink pixels are my guess at the color of a Sharpie S-Gel in Blue:

Here’s the final product!