Google new logo How to do only 305 bytes

Source: Internet
Author: User
Tags uppercase letter

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://">                                                        <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://">                                                        <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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.