Ian Fieggen Ian's Graphics Site Pixelated Graphics Icon
Ian's Graphics Site - Computer graphics information and advice from a "PixelTech"
Google's New Logo in 305 Bytes
Google's new 2015 logo

In Sep-2015, Google released a new, simplified logo. I wondered if it was possible to create a reasonably faithful version of this logo in SVG format in only 305 bytes.



Google's New Logo Unveiled

In Sep-2015, this article on the Google Design website unveiled Google's new identity. Core to this is a new, simplified 'Google' logo:

Google's new 2015 logo, PNG format, 13,504 bytes

The article prompted someone to pose the question: "How could Google's new logo be only 305 bytes, while its old logo is 14,000 bytes?"

Many people responded that the reference to "305 bytes" in the article probably meant a tiny copy of the logo. For example, here's a tiny version that I created in GIF format in just 301 bytes: Google's new 2015 logo, GIF format, 301 bytes

Like many others, I also speculated that the "305 bytes" might refer to a logo in SVG graphics format. Images in this format are described mathematically, allowing them to be scaled to any size. Perfect for a Google logo to be shown on anything from a tiny mobile screen to a massive billboard. And, seemingly, easy to describe such a simple logo with a few compact lines of SVG code. Or is it?

Although Google's new logo may appear simple, take a closer look: The curve of the 'G' bends inwards slightly before it meets the straight section. The outsides of the 'o's are perfectly round, whereas the insides are slightly elliptical, making the tops and bottoms of the 'o's thinner than the sides. The oval part of the 'g' tapers thinner on the right side. The straight stroke of the 'e' is thinner than its outer curve. All typographic subtleties that differentiate a professional logo from an amateur effort and make it "look right".

The fact is that all of those subtleties can't be squeezed into 305 bytes of SVG code. As proof, Google's official SVG logo on Wikimedia weighs in at a hefty 2,947 bytes. The examples of 600-700 bytes that I've seen on other websites, and which are based on perfect circles, have been rather crude!



Ian's Version of Google's Logo

So I wondered – how small an SVG file can I create that will produce an acceptable looking Google logo? One that retains the look and feel of the original and makes as few compromises as possible? One that isn't simply based on perfect circles?

My best effort so far is just 465 bytes:

To check the accuracy, below I've drawn the same SVG logo over the top of Google's original logo so that you can see the differences (eg. the colors peeking out the edges). Hover over any letter to hide my version (in grey) and expose the original (in color).

Google's new logo

You'll see that the sides of most of my letters are thinner than the originals, whereas the straight stroke on my 'e' is thicker than the original. The oval part of my 'g' also doesn't taper on the right side. But overall it's pleasingly faithful to the original.

Note also that any differences become less noticeable when the logo is shown smaller. Try the "hover test" on the following half-scale version:

Google's new 2015 logo, half-scale


Conclusion

I believe that it's impossible to make an acceptable version of Google's new logo in SVG format in only 305 bytes. But my version, at 465 bytes, comes close.


Sponsored Links