谷歌換logo已經(jīng)有一段時間了，對于更換Logo的問題，大家討論的最多的是到底新老Logo哪個更好看。

但也有個別同學注意到了一個事實:谷歌的新Logo只有305字節(jié)那么大，而老的Logo則有14000字節(jié)。

咳咳，按照谷歌的網(wǎng)絡流量，單單一個Logo就能為整個互聯(lián)網(wǎng)省下不少帶寬啊。新Logo為什么就這么小呢？

谷歌新舊Logo

谷歌的舊Logo使用了serif字體，而這類字體只能通過貝塞爾曲線來創(chuàng)建。如下圖所示，從谷歌的Logo可以看到,舊Logo有多達100個錨 點，因此最終產(chǎn)生的的Logo文件達到約6Kb(6380 字節(jié))大小也不足為奇。進行壓縮以后，Logo的大小大約 2 KB (2145字節(jié))大小。

谷歌舊Logo

谷歌新版的Logo在進行了大量簡化，除了小寫的字母g以外，其他字母均可以由圓形和矩形構造出來。如下圖所示:

谷歌新Logo

整個新Logo由如下部分組成：

10個圓形。(大寫字母G占2個圓，小寫字母g占2個圓，字母e占兩個圓，每個字母O占2個圓)。

5個矩形。(大寫字母G占2個矩形，小寫字母g占1個矩形，字母e占兩個矩形)。

一個由7個錨點組成的圖形(小寫字母g的下半部分)。

我創(chuàng)建了大寫字母G的SVG矢量圖，生成的文件大小是302字節(jié)，壓縮后只有195字節(jié)。如下是未壓縮的圖形代碼(由兩個矩形和兩個圓構成)。

1. <svg xmlns="http://www.w3.org/2000/svg">
2. <circle r="100" cy="100" cx="100" fill="#4885ed"/>
3. <circle r="70" cy="100" cx="100" fill="#ffffff"/>
4. <rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/>
5. <rect height="30" width="88" y="87" x="111" fill="#4885ed"/>
6. </svg>

上面的代碼生成的圖形如下圖右邊的G所示。

當然，還有另外一種繪制方式。我們可以使用strokes方式而不是fills方式來繪制Logo，這種方式最終產(chǎn)生的的文件更小，只有290字節(jié)。代碼如下所示：

1. <svg xmlns="http://www.w3.org/2000/svg">
2. <circle r="100" cy="100" cx="100" fill="#4885ed"/>
3. <circle r="70" cy="100" cx="100" fill="#ffffff"/>
4. <rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/>
5. <rect height="30" width="88" y="87" x="111" fill="#4885ed"/>
6. </svg>

使用strokes的繪制方式，整個Logo只需要兩個圓(兩個字母O)，四條路徑(分別對應字母G、 g、 l,和e)即可繪制完成。如下圖所示：