October 31, 2014

Subscribe

Recreating a Logo in SVG (from a PNG)

It’s file size is only 3.83KB, which isn’t bad at all. And it looks crisp on hdpi screens. But I wanted to try recreating it in SVG anyway, mainly as a learning exercise.

Getting the basic outline of the letters was easy, given how blocky they are. I had Adobe Illustrator trace them and output the result as an SVG. This would be my starting point for hand-coding the rest.

First, I rounded off each point that Illustrator generated to integers. For such simple shapes, integers really just make it easier to ensure everything is lining up. A few lines ended up a pixel off from where I wanted them, but that was easy to correct. So this was my starting point:

The only quirk above is, you can see I’m reusing the first “o” for the second “o”, just shifting it over 60 pixels.

I’m going to be reusing this set of letters several times, so I moved it up into a defs section and placed them in a group. Next I created the blue outline by “use”-ing the group and applying a stroke. I also modified the viewBox attribute up in the svg tag to shift everything over by 0.5 pixels. Why? Because in SVG all strokes are centered on paths, so a 1 pixel stroke will be split across pixels. See the first line below in a hypothetical zoomed-in grid of pixels:

By shifting everything by half a pixel, the strokes fill whole pixels only, as seen in the second line. Here’s the updated code:

The original logo has a 1 pixel gray outline below and to the right of the letters. To recreate that, reuse our letter group again, appearing before (i.e. below) both the gradient fill and outline, like this:

Now things begin to get a little tricky. The PNG logo has a light inset shadow as well as a regular drop shadow. Not being well-versed in SVG filters, I had to do some searching on these. Google offers up many examples for creating drop shadows, but the inset shadow was more difficult. Eventually I found this post with a flawless solution. Here’s the filter markup I ended up using:

Values to adjust are the attributes in feGaussianBlur (the blurriness), feOffset (offset of the inset shadow), and feFlood (shadow color and opacity). Let’s apply this filter to the gradient fill object:

Again, the blur and offset can be adjusted, and here the slope attribute of feFuncA controls the opacity. I want this filter applied also to the gradient fill object, but it already has a filter. How to apply two filters to the same object? It doesn’t seem possible in SVG, but there is a work-around. Wrap the object in a group tag and apply the second filter to the group. Like this: