為什麼新的 Google 商標只有 305 Bytes,而舊的卻有14,000 Bytes?

為什麼新的 Google 商標只有 305 Bytes,而舊的卻有14,000 Bytes?UI 設計師 Ilya Yakubovich 在 Quora 給了解答。
評論
評論

為什麼新的 Google 商標只有 305 Bytes,而舊的卻有 14,000 Bytes?UI 設計師 Ilya YakubovichQuora 給了解答:

小知識 :Byte 中文譯作「位元組」,通常用作電腦資訊計量單位,不分資料型態。一個位元組代表八個位元(Bit)。

舊的商標使用了只能用貝茲曲線製作,複雜的襯線字型。他總共含有 100 個錨點,產生了一個 6KB (6,380 bytes) 的檔案。經壓縮過後,檔案大小降到 2 KB (2,145 bytes)。

另一方面,新的簡化版商標幾乎可以圓圈和矩形構成(除了小寫 g 以外):

整個商標包含了:

  • 10 個圓圈(大寫 G 和小寫 g 各 2 個,每個 o 有 2 個 ,e 有兩個)
  • 5 個矩形(大寫 G 有 2 個,小寫 l 有 1 個,e 2 個)
  • 1 個有 7 個錨點的形狀(小寫 g 的底部)

雖然 Google 還沒發表最佳化的 305 bytes 商標而且網路上也還看不到,但我相信他們真的像他們所說的一樣把檔案大小減到 305 bytes 了。為了驗證,我重新用 SVG 格式做了第一個字母「G」,產生了一個壓縮前 302 bytes 的檔案,壓縮後是 195 bytes。

以下是完整未壓縮的圖形,包含兩個圓圈和兩個矩形:

<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> 
產生了下面右邊的圖形:

如同一位網友指出的,有個方法可以用框線取代填滿產生這個新商標。這也是舊的方法做不到的,而且而且檔案甚至可以更小。

完整的商標程式碼(由 Jaume Sanchez Elias 提供)是 290 bytes:

<svg xmlns="SVG namespace" width="600" height="250"> <g stroke-width="16" fill="none">  <path d="M173 102a51 51 0 1 1-13-30m20 37h-53" stroke="#4a87ee"/>  <circle cx="227" cy="128" r="32" stroke="#d83038"/>  <circle cx="313" cy="128" r="32" stroke="#f4c022"/>  <path d="M401 160a31 31 0 1 1 0-61m-4 0a24 29 0 1 1 0 61m26-67v79m-1-12a20 20 0 1 1-52 17" stroke="#4a87ee"/>  <path stroke="#4ab95a" d="M449 51v115"/>  <path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28" stroke="#d83038"/> </g> </svg> 

使用這個方法,整個商標可以只用 2 個圓圈(用在 2 個 o)和 4 條直線(用在 G, g, l 和 e)畫出來。

2px.png
2 px 的框線
16px.png
16 px 的框線

精選熱門好工作

外場服務人員

Sugar Pea
臺北市.台灣

獎勵 NT$4,000

資深軟體工程師- KOL Radar (Senior Software Engineer, Node.js)

iKala 愛卡拉
臺北市.台灣

獎勵 NT$20,000

INSIDE 行銷企劃專員

關鍵評論網股份有限公司
臺北市.台灣

獎勵 NT$20,000

評論