编者按:
有人在Quora上提问:Google的新logo是如何做到只有305字节的?旧logo的大小有14000字节之多。来自多伦多的UI设计师Ilya Yakubovich的回答1万+的投票。以下是杰微刊对其回答的完整译文。
之前的logo采用的是较为复杂的serif(衬线)字体,它只能通过贝塞尔曲线来构建。这样的话总共会有100个锚点,结果产生的就是一个6KB(6380字节)的文件。而压缩之后能达到2KB(2145字节)。
新logo是一个简化的版本,也就是说,几乎可以完全通过圆形和矩形来构建(小写字母g除外)。
整个logo包含:
① 10个圆形(大写G和小写g分别有两个圆,两个o分别有两个圆,字母e有两个圆)
② 5个矩形(大写字母G有两个矩形,小写l有1个矩形,小写e有2个矩形)
③ 1个由7个锚点构成的形状(小写g由上往下写的部分)
虽然Google尚未发布新版本的305字节的logo,也不太可能在网上出现,但是我相信他们的logo会如预期一般,降至305字节。
为了验证这一点,我采用SVG格式试着创建了第一个字母G,结果产生的是一个302字节的文件(未压缩),压缩之后是195字节。
下面是整个未压缩版的绘图过程,包括两个圆形和两个矩形:
Svg代码
- <svgxmlns="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>
这样就产生了下面右边的图形:
另外有一位用户指出,还有一种途径可以创建出新的logo,它是采用笔画(stroke)的方式来完成,而非填充(fill)的方式。这也是之前的老logo没法实现的,这种方法甚至可以带来更小的文件。整个logo的代码共290字节:
Svg代码
- <svgxmlns="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>
通过这种方法,整个logo用两个圆圈(两个o)和四条路径(G, g, l和e)就可以绘制完成。