Making an SVG by Hand

Or, how I’ve learnt everything I know about everything.

I’m restarting a company that was last active in 2009, and unfortunately the only copy of the company’s logo that I could find was a small 32x32 PNG that I’d had for an icon or something.

For all the modern things I was trying to do the resolution simply wasn’t enough, here it is expanded to the fairly common 200x200 size used for twitter:

Obviously terrible and unacceptable, but as much as I tried I couldn’t find anything higher resolution — or more importantly the original vector files from my designer.

This is step one of learning something new: have a problem.

I love problems, problems are the fuel I need to create solutions, and often that involves learning something new. I’ve been doing this professionally now for over 20 years, and as an amateur for close to 30.

I’m also autodidactic. I tell people that I have a couple of years of college, but really I only ever attended four or five courses, the rest of the time I was just tinkering with things, playing around, trying things out, mostly doing a lot of failing and every now and then I’d have a breakthrough and discover something new.

For my blurry logo problem I happened to already know a few solutions, I could download a vector graphics program like Inkscape or Illustrator, I could probably export something decent from Gimp or maybe even Preview on Mac. I also knew of a vector file format that was supported on the web called SVG.

Had I not known about SVG then I surely could have discovered it with some quick Googling. The first three results from Google for “high resolution web graphics” all mention SVG.

This is all step two of learning something new: form an hypothesis.

Googling “SVG” brings up a wikipedia article that mentions, among other things:

SVG images and their behaviors are defined in XML text files.

I happened to already know this, but for someone who didn’t it was just another Google search away. With a simple logo to produce, and no desire to download, install, or learn how to operate a graphics program, this means that I can create the graphic in my trust text editor.

I can still remember an enormous turning point for me in my early days of learning how to program in UNIX. I had worked out that in commands had to be somewhere on the PATH so I had been systematically going through all the commands and trying them out. One late evening, in a computer lab at college, someone with far more knowledge than me leaned over my shoulder and said: “man man”

The second Google result for “SVG” was something from the Mozilla Developer Network, a resource that I happen to already know and trust for many other web-based standards/technologies.

This is step three of learning something new: find a trusted resource.

There’s a lot of documentation for SVG, scores of different elements, each with many different attributes. Thankfully on the MDN page there’s a link to an SVG Tutorial and the Getting Started page of that tutorial has a code sample:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

This is exactly what I love to find, it’s always easier to edit than create something from scratch, so finding a starting place like this is great if you can.

This is step four: find a starting point if you can.

I grabbed that code and saved it to a file called “logo.svg” and then I wrote a quick HTML page to display that:

<html><body><img src="logo.svg"></body></html>

Nothing pretty, just something to display the logo in a web page so I could make little changes, hit refresh and see their effect. This loop can be expressed more formally as:

Make a change.
Test.
GOTO 1.

This sequence is at the heart of everything I do as a programmer, I make changes, I observe their effects, and I repeat. I try to direct the effects closer and closer to my desired outcome with each change, and I try to make the “Test” step as simple and automated as possible so I can spend as little time as possible waiting for that feedback.

Then, if I get stuck, or can’t work something out, I jump into the trusted reference that I found in step three. If at any point I conclude that this hypothesis is not leading me (quickly enough) toward a solution to my problem then I jump back to step two and form a new hypothesis.

This is step five of learning something new: start tinkering.

It took me all of maybe 20 minutes to come up with the following final code for my SVG:

<?xml version=”1.0"?>
<svg width=”300" height=”300" viewBox=”0 0 300 300" xmlns=”http://www.w3.org/2000/svg">
  <g fill="#A02C2C">
    <rect x="75" y="0" width="225" height="75"/>
    <rect x="150" y="75" width="75" height="225"/>
  </g>

  <g fill="#D35F5F">
    <rect x="0" y="0" width="75" height="300"/>
    <polygon points="75,0 150,0 75,75"/>
  </g>
</svg>

Unfortunately, Medium doesn’t support the display of SVGs, but you can see the SVG on our web page: http://handle.it/ and here’s a high resolution PNG of it at 300x300:

That’s it, that’s all the steps for everything I know about everything.

Sometimes the trusted resource is a person, sometimes the starting point is given to me by someone else, sometimes I collaborate with others in forming the initial hypothesis, but the overall process is always the same.