Google's New Logo in 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 was a new, simplified “Google” logo:

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:

Maybe SVG format?

Like many others, I wondered whether 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?

Detailed Analysis

Although Google's new logo may appear simple, when you take a closer look, you'll see that it consists of more than just simple lines and circles.

Most letters are slightly thicker at the sides. The rightmost curves of the “G” and “e” are each pulled inwards slightly. The oval part of the “g” tapers thinner on the right side. The straight stroke of the “e” is thinner than its outer curve.

These typographic subtleties are what differentiate a professional logo from an amateur effort. They make it “look right”.

Alas, they also prevent the logo from being squeezed into 305 bytes of SVG code. In fact, Google's official SVG logo on Wikimedia weighs in at a hefty 1,906 bytes. The examples of a few hundred bytes that I've seen on other people's websites – and which are based on perfect circles – have been very crude!

Ian's Version of Google's Logo

So – how small an SVG file could I create that would produce a relatively faithful version of Google's new logo? Was it possible to get close to 305 bytes and still look good?

My best effort to date is just 431 bytes:

To check the accuracy, below I've redrawn my SVG logo (in grey) over the top of Google's original logo (in color) so that you can see the differences (eg. the colors peeking out the edges). Try zooming in and hovering over or clicking on the logo to expose the original.

You'll see that the sides of most of my letters are thinner than the originals, while the right side of the oval on my “g” and the straight stroke on my “e” are both thicker than the originals. But overall it's pleasingly faithful to Google's design aesthetics.

Note also that any minor differences become less noticeable when the logo is shown smaller. Try the “hover” or “click” test on the following half-scale and quarter-scale renditions, which appear progressively closer to the original:

Conclusion

I believe that it's impossible to make a truly accurate rendition of Google's new logo in SVG format in only 305 bytes. Even Google can't pull off that feat! But my version – at just 431 bytes – comes pretty close.