Converting Logo to Scalable SVG

August 4, 2014Category: Tutorial, WebTags: ,
This was originally posted on The Philosophical Geek (my original blog). I've reposted it here on my current blog because I still think it is useful and/or interesting. More Information

Background

When coming up with a logo, I took inspiration from the first letter of my name: A. I played around with many variations, and eventually came up with a symbol which resembles an A but isn’t exactly the same.

logosvg1

I took my sketches out ideas, and went into Paint.net to come up with a sharp looking PNG icon. I started out large, at 500px by 500px, and then resized down to come up with an icon which looks decently sharp (I’ve added a gray background underneath because the image is white):

logosvg2

I plugged it into my website (my WIP website which has been sitting on my localhost for 6 months now, awaiting the availability of andymercer.net), and left it there.

Problem

Recently I built a site for my partner at Catstache, and when I tested it on a high-res screen, her logo looked terrible. I realized the problem was that it was the only thing on the site that wasn’t in vector format. I immediately remembered my own logo, and sure enough when I tested, it too looked blurry when zoomed in. I set out to recreate it as a vector image.

Solution

I chose SVG as my format because it’s the most widely supported vector format. Every modern web browser will correctly render an SVG image, and it’ll look sharp at any size. To start, we have two ways of creating it. We can either build the image with a vector program or code it manually. Given my lack of Photoshop, I looked into coding it by hand.

To my surprise, I found that it’s actually incredibly simple. You basically imagine a grid, with the top left being 0-0 (x-y). You define shapes, and give them an X and Y coordinate (higher being further right and down). That’s it. I broke my logo into two polygon shapes, and defined each breakpoint.

Code

<svg version="1.1" baseProfile="full" width="50" height="50" >
    <polygon points="15 5, 11 20, 39 20, 35 5" fill="white"/>
    <polygon points="10 25, 5 45, 15 45, 16.5 39, 33.5 39, 35 45, 45 45, 40 25" fill="white"/>
</svg>

Output

You should be able to see it, and if you zoom this page, it should stay super sharp. And only 4 lines of code. Success!

Results

This was originally posted on The Philosophical Geek (my original blog) as a different post. I've combined it here because it was a direct follow up with results of the above work. More Information

Scalar PNG Logo:

logosvg3

Vector SVG Logo:

logosvg4