谷歌新Logo如何做到只有305字節(jié)
谷歌換logo已經(jīng)有一段時(shí)間了，對(duì)于更換Logo的問(wèn)題，大家討論的最多的是到底新老Logo哪個(gè)更好看。
但也有個(gè)別同學(xué)注意到了一個(gè)事實(shí):谷歌的新Logo只有305字節(jié)那么大，而老的Logo則有14000字節(jié)。
咳咳，按照谷歌的網(wǎng)絡(luò)流量，單單一個(gè)Logo就能為整個(gè)互聯(lián)網(wǎng)省下不少帶寬啊。新Logo為什么就這么小呢？
谷歌新舊Logo
谷歌的舊Logo使用了serif字體，而這類字體只能通過(guò)貝塞爾曲線來(lái)創(chuàng)建。如下圖所示，從谷歌的Logo可以看到,舊Logo有多達(dá)100個(gè)錨 點(diǎn)，因此最終產(chǎn)生的的Logo文件達(dá)到約6Kb(6380 字節(jié))大小也不足為奇。進(jìn)行壓縮以后，Logo的大小大約 2 KB (2145字節(jié))大小。
谷歌舊Logo
谷歌新版的Logo在進(jìn)行了大量簡(jiǎn)化，除了小寫的字母g以外，其他字母均可以由圓形和矩形構(gòu)造出來(lái)。如下圖所示:
谷歌新Logo
整個(gè)新Logo由如下部分組成：
-
10個(gè)圓形。(大寫字母G占2個(gè)圓，小寫字母g占2個(gè)圓，字母e占兩個(gè)圓，每個(gè)字母O占2個(gè)圓)。
-
5個(gè)矩形。(大寫字母G占2個(gè)矩形，小寫字母g占1個(gè)矩形，字母e占兩個(gè)矩形)。
-
一個(gè)由7個(gè)錨點(diǎn)組成的圖形(小寫字母g的下半部分)。
我創(chuàng)建了大寫字母G的SVG矢量圖，生成的文件大小是302字節(jié)，壓縮后只有195字節(jié)。如下是未壓縮的圖形代碼(由兩個(gè)矩形和兩個(gè)圓構(gòu)成)。
- <svg xmlns="http://www.w3.org/2000/svg">
- <circle r="100" cy="100" cx="100" fill="#4885ed"/>
- <circle r="70" cy="100" cx="100" fill="#ffffff"/>
- <rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/>
- <rect height="30" width="88" y="87" x="111" fill="#4885ed"/>
- </svg>
上面的代碼生成的圖形如下圖右邊的G所示。
當(dāng)然，還有另外一種繪制方式。我們可以使用strokes方式而不是fills方式來(lái)繪制Logo，這種方式最終產(chǎn)生的的文件更小，只有290字節(jié)。代碼如下所示：
- <svg xmlns="http://www.w3.org/2000/svg">
- <circle r="100" cy="100" cx="100" fill="#4885ed"/>
- <circle r="70" cy="100" cx="100" fill="#ffffff"/>
- <rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/>
- <rect height="30" width="88" y="87" x="111" fill="#4885ed"/>
- </svg>
使用strokes的繪制方式，整個(gè)Logo只需要兩個(gè)圓(兩個(gè)字母O)，四條路徑(分別對(duì)應(yīng)字母G、 g、 l,和e)即可繪制完成。如下圖所示：
