A few weeks ago beginning September 2015 Google unveiled their new identity, complete with a nice article covering the. That was intriguing: there are many well-known techniques to make assets lightweight, but 305 bytes sounded too few to me. Google has a new logo. The idea wasn't to replicate the logo pixel by pixel, but to check if, having the right elements in the file, how close the size can get to 305 bytes. Building the logo Looking at the logo, it looks like it's not composed of filled-in shapes, google logo svg rather a few shapes, drawn with a thick stroke: that is, a rectangle is not a polygon made of four coordinates filled in with colour, but a thick line connecting two points. I was compressing the file manually on disk to check the compression. I got Goo and the file was already 304 bytes. I was at Googl at 265 bytes. There's some discussion regarding this, but I think the geometry of that letter can only be done with two arcs of different curvature for the body, plus another arc for the descendent. A circle like the o letters is not the same shape. Can the new google logo be 305 bytes. This is a quick and dirty version in 290 bytes — Jaume Sanchez Elias thespite Code golfing across time and space After posting the final version, -code golfer extraordinaire- opened fire reducing 20 bytes 5 bytes gzipped with several combined tricks. This turned out not to be a great idea, since jsbins created by unregistered accounts have an expiration date I didn't know that at the time. Fortunately, I kept several intermediate steps. Big kudos to for creating and putting so much of his life in. If you haven't read his series of postsdo it now; it's a very good read and lots of deep insight into side projects and coding. Check the whole twitter timeline for details, but here's a list of techniques that were tried, and how successful they were: Removing attributes Some attributes can be removed without much effect. Remove attributes that have no effect Removing the version implies version 1. Assume implicit version Removing the xmlns attribute forces the X default. Remove xmlns attribute 86 down to 37. Ignoring spaces between attributes When having attributes with quoted values you can skip the spaces, since the closing quote acts as separator. Removing spaces between attributes 124 bytes to 118. Note that the technique in the next point makes this one obsolete, but sometimes you need to try different options, or mix them. That's a big win in size, since it removes two chars per attribute. Two things to consider: space separated values in attributes such as d can be unquoted by replacing spaces by commas; and when the attribute is at the end of the tag, leave a space before closing the tag. Grouping attributes There's repeating colours in the logo: two letters are blue, two letters are red. You can choose one to be the default colour of all shapes, defined in the svg tag, and only change it in the path elements that have a different colour. At the google logo svg time, repeating patterns are good for compression see next pointso this technique can shave some bytes, but may be the straightforward approach work better on the long run. This technique is worth considering nevertheless. Ordering attributes and string Compression algorithms look for repeating patterns that can be replaced by keys in a dictionary. Reordering text to make patterns emerge is a very good way of improving compressibility. Same length, but it compresses better. While these work great to get the original file size very google logo svg, the resulting text has too much entropy for the compression algorithms to be efficient. The result is a compressed file very similar in size to the original. Big kudos toand many others for their mastery refactoring and reducing the logo even further. This is some seriously cool tool. Wrapping up The last size was 146 bytes: Almost boring at this point, but we're down to 146: — Wojciech Maj wojtekmaj91 It's amazing to think that it went down that much. It was a really fun process: trying, sharing and google logo svg using local tools and the web. I hope this has been interesting. If you've found something out that didn't know before, mission accomplished. As always, comment on the section below, or hit me on or e-mail.
