[译]Google新logo是如何缩减13000字节的

原文链接：Quora
译者：杰微刊—程慧

 

编者按：
有人在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字节。

下面是整个未压缩版的绘图过程，包括两个圆形和两个矩形：

?

1 2 3 4 5 6

<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字节：

?

1 2 3 4 5 6 7 8 9 10

<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）就可以绘制完成。

 

 

 

 

 

-------------------好久不见的分割线-------------------

如果您发现这篇译文的任何问题，可随时与杰微刊联系。

我们水平有限，但理想高远。杰微刊旨在分享优质的内容。

杰微刊也同样期待理想的您对这个世界的贡献。欢迎任何目的的联系。

杰微刊的有偿投稿邮箱是：weikan@jointforce.com。

我们的QQ是：1820494189。

[转载请保留原文出处、译者和审校者。 可以不保留我们的链接] 

原文点此查看