Recently, in a momentary lapse of reason and finding myself with the need to keep some time (the usual ‘too long to not do anything, too short to get started on anything serious’) I found myself picking back up the idea I had already had some time ago to create a vector image of the Grammar Nazi logo.

Of course, the first step was to see if there was one already; there are in fact plenty of rasterized renditions of it, but a scarcity of its vector form. In fact, I found three of them (from Wikipedia, in the Wikimedia commons and finally on OpenClipArt), none of which was to my satisfaction.

The most glaring defect in two of them was the presence of text: I was looking for a pure logo format. The Wikimedia file was, in fact, the one that got closest to what I wanted, except for one minor detail: the color choice for the red of the flag (in this respect, the OpenClipArt version was more to my liking).

The solution would seem simple: all I needed to do was open the Wikimedia SVG and hand-edit the choice of flag color to match the one from OpenClipArt. Which was in fact what I set up to do.

However, on opening the .svg I realized in horror that even such a simple and elegant design could result in the most horrible and displeasing source code.

For reference, this is what I found:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="229.999mm" height="229.999mm" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 36.8553 36.8553"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <rect fill="#FF4942" width="36.8553" height="36.8553"/>
  <circle fill="white" cx="18.4277" cy="18.4277" r="15.863"/>
  <polygon fill="black" points="21.1059,7.71462 10.3929,18.4277 18.4277,26.4625 26.4624,18.4277 23.7842,15.7494 18.4277,21.106 15.7494,18.4277 23.7841,10.3929 31.819,18.4277 18.4277,31.8191 5.03626,18.4277 18.4277,5.03633 "/>
 </g>
</svg>

What the hell was I looking at? Whoever in their sane mind would write something like that? What were all those fractional numbers doing as coordinates? Why was the size fixed, and to such a ridiculous number, to boot? What were those rendering specifications about? Why reference the xlink namespace?

Of course, the answer to all those questions (and many more!) was in the brief XML comment on top of the file as well as in the empty metadata element: the file was computer-generated, after being sketched in a specific application.

So I said to myself: what the hell, I can write something much better than that in half the disk space. Which I in fact did, with room to spare. At first, I tried to follow the original design as closely as possible, while getting rid of all the stuff which I deemed useless (grouping, fixed size, etc), and of course altering the color to my taste.

What posed the biggest problem was the polygon describing the stylized G of the Grammar Nazi. I couldn't make head or tail of the numbers, although the design of the G was relatively easy to follow: if the G was in a straight orientation, it would be: go right three, down three, left five, up five, right five.

And I wondered: why not do it this way? In fact, I had at least three different ways to achieve it in SVG: either with a polygon (as per the original) or with a stroked path with appropriate cap and corner options, or with a filled path describing the outline.

My final choice was for the outline path, specifically to easily allow an outline version of the same stylized G, using the same parameters. The use of the path instead of a polygon allowed me to use the h and v commands instead of elaborate pairs, and designing the G in its straight position, centered at (0,0) allowed for a very compact description. Of course, the G then had to be put in place with translations, rotations and finally scaling.

This was the result of my first attempt:

<?xml version='1.0' encoding='UTF-8'?>
<svg
 xmlns='http://www.w3.org/2000/svg'
 viewBox='0 0 40 40'>
 <title>Grammar Nazi</title>
 <rect fill='#d00' width='40' height='40'/>
 <circle fill='white' cx='20' cy='20' r='15'/>
 <path fill='black' d='M-5,0v5h20v10h-30v-30h40v-10h-50v50h50v-30h-30z'
    transform='translate(20,20)rotate(-45)scale(.4)'/>
</svg>

resulting in the following render:

Grammar Nazi logo (v1)

Grammar Nazi (v1)

Although the color was finally right, and the file had finally been cut down to an elegant, efficient, modicum of instructions, there still was something odd about the size of the G with respect to the circle and square. I couldn't quite put my finger on the issue, so, quite proud of my results, I decided to share it with the world.

To do things ‘the right way’, I wanted to fill the file itself with the appropriate metadata on authorship and license, something which is not the most trivial thing to do. After perusing the Internet and leaning on Inkscape just to see how metadata could be saved, I managed to fill up the file correctly.

Oh god. A three-hundred-and-something lean-and-mean minimalistic .svg had bloated to a monster five time its size, just to specify the author, the license and a couple of tags. (No, I'm not going to paste it here.) So I finally opted for having two files, one with and one without metadata, uploading the former to OpenClipArt, and keeping the lean and mean version here on the wok, given the low upload bandwidth featured by my ADSL connection.

The most glaring difference between my initial version of the logo and the Wikimedia file was in the ratios between the main component sizes.

For example, the Wikimedia picture has an inner circle with a radius r of almost 16 centered in a square with a side s of almost 40, although r differs from 16 less than s differs from 40 (1% difference for r, 8% for s). The r/s ratio is 0.43, a pretty close approximation to sin(π/3)/2, indicating a diameter/side ratio of sin(π/3) = sqrt(3)/2. By contrast, my initial choice of 15/40 gave me an exact 0.375, a 3/8 that had no rhyme or reason.

Much worse than that, the ratio of the stylized G to the circle and square was absolutely arbitrary in my case, and undecipherable in the Wikimedia file case. I noticed that my design for the G filled a square of length 50, while the main square had a length of 40: the scaling by .4 = 2/5 brought the actual G to have a side which was half that of the main square.

So my next idea was to adjust the circle/square radius, while at the same time bringing the square and G sides to be more reasonably in tune: the square side was brought from 40 to 50, and the circle radius from 15 to 20. The only thing remaining was to choose a sensible scale ratio for the G, and I finally came up with a 5(1-1/ϕ)/4, that somehow tried to take into account the ratio between the circle diameter and square side (now 4/5), while introducing the magic of the golden ratio, resulting in the following image:

Grammar Nazi logo (v2)

Grammar Nazi (v2)

Much better, but possibly still not perfect. Yet, the best I have been able to come up with, so far.

One thing that I've learned from this experience is that even for a logo that is nothing more than a very small number of elements with simple geometrical characterization, it is not trivial to find the ‘best’ proportions between the components. Especially when, as in my case, one is not satisfied with just finding a visually pleasing solution, expecting also to derive meaningful mathematical relations between the numbers.