A post went around earlier about the new Google logo’s file size, and it completely derailed my day, but in a fun way so I figured I’d share.
First things first: I am not sure about the logo itself yet, though I’m leaning toward like. Twitter and Facebook have been hilarious on this, truly a love/hate situation. What I absolutely LOVE are the dots:
For more videos about the concepts behind the new logo and everything else, the post Evolving the Google Identity is a fascinating read.
What spurred further exploration, however, was this post at Top 5 Techs about the file size of the new logo being 305 bytes in SVG format. Now THAT I had to play with. Off to Illustrator!
Here’s the first build, using circles, rectangles, a single polygon (triangle), and the bezier path for the descender on the lowercase “g.” As you can see, this doesn’t work at all on three of the letters:
- the capital “G” because the curve to the crossbar gets steeper, leaving the path of the circle
- the lowercase “g” because the bowl is not a perfect circle, it’s flattened as it hits the descender
- the lowercase “e” because the curve on the top right leaves the path of a true circle as it gets to the crossbar
This is ugly as sin, and weighs in at 1,559 bytes standard SVG, 604 bytes compressed SVGZ using just four shape types. And yes, I went in with a text editor to remove all the garbage Illustrator adds to SVG files.
Time to clean it up a bit! I took four of the circles (outside circle on the capital “G,” both circles on lowercase “g,” and the outside circle on the “e”) and made them ellipses to get closer to the actual logo. Not perfect, but much better. This file weighs in at 1,601 bytes standard SVG, 651 bytes compressed SVGZ. Not much of a hit for the extra code required for ellipses vs. circles!
And since I’d gone this far I figured it was time to go full Bezier paths for the three letters in question. The “o” are still built as a white circle drawn over a colored circle, I found that saved 549 bytes (!!) over making compound paths. The “l” is still a rectangle of course. I did a good job minimizing anchor points, but I must admit I’m not an expert with the Bezier pen. The “e” really needs more work, that’s kind of an ugly hump, but this had already taken up too much time! Anyhow, now we’re up to 1,789 bytes standard SVG, 885 bytes compressed SVGZ.
I don’t see how anything reasonably accurate could be created in 305 bytes (if it’s true and it’s out there, I’d love to see the code), but even at 885 bytes for truly accurate logo using Bezier paths, phone users around the world can be thankful for the saved bandwidth.