Google new logo How to do only 305 bytes

Google changed the logo for some time, for the replacement of the logo issue, we discussed the most is the new and old logo which is more beautiful.

But there are also individual students have noticed the fact that Google's new logo is only 305 bytes that big, and the old logo has 14000 bytes.

According to Google's network traffic, a logo alone can save a lot of bandwidth for the entire Internet ah. Why is the new logo so small?

Google Old and new logo

Google's old logo uses serif fonts, which can only be created with Bezier curves. As shown, from the Google logo can be seen, the old logo has up to 100 anchor points, so the resulting logo file reached about 6Kb (6380 bytes) size is not surprising. After compression, the logo size is approximately 2 KB (2145 bytes) in size.

Google old logo

Google's new version of the logo in a lot of simplification, in addition to the lowercase letter G, the other letters can be made of round and rectangular structure. As shown in the following:

Google new logo

The whole new logo consists of the following parts:

1. 10 round. (The Uppercase letter G accounts for 2 circles, the lowercase letter G accounts for 2 circles, the letter e accounts for two circles, each letter O accounts for 2 circles).
2. A rectangle of 5. (The Uppercase letter G is 2 rectangles, the lowercase letter g is 1 rectangles, the letter E is two rectangles).
3. A graphic consisting of 7 anchor points (lower half of the lowercase g).

I created an SVG vector with the capital letter G, the resulting file size is 302 bytes, and only 195 bytes after compression. The following is an uncompressed graphic code (consisting of two rectangles and two circles).

<svgxmlns= "Http://www.w3.org/2000/svg">                                                        <CircleR= "+"Cy= "+"CX= "+"Fill= "#4885ed"/><CircleR= "The "Cy= "+"CX= "+"Fill= "#ffffff"/><rectTransform= "Rotate ( -40 166,67)"Height= "+"width= " the"y= "+"x= "117"Fill= "#ffffff"/><rectHeight= "+"width= " the"y= "The "x= "111"Fill= "#4885ed"/></svg>

The above code generates a graph as shown in the G on the right.

Of course, there is another way to draw. We can use strokes instead of fills to draw logos, and this way the resulting file is smaller, only 290 bytes. The code looks like this:

<svgxmlns= "Http://www.w3.org/2000/svg">                                                        <CircleR= "+"Cy= "+"CX= "+"Fill= "#4885ed"/><CircleR= "The "Cy= "+"CX= "+"Fill= "#ffffff"/><rectTransform= "Rotate ( -40 166,67)"Height= "+"width= " the"y= "+"x= "117"Fill= "#ffffff"/><rectHeight= "+"width= " the"y= "The "x= "111"Fill= "#4885ed"/></svg>

Using strokes, the entire logo requires only two circles (two letters O), and four paths (corresponding to the letters G, G, L, and E) can be drawn. As shown in the following:

Google new logo How to do only 305 bytes