热门排行
logo在线设计生成器印刷制作,就找玛雅兔,专业。

为何谷歌LOGO能做到如此之小?

发布时间:2018/09/28 10:32 编辑:logofish

谷歌已退出中国市场好久了,距谷歌更换LOGO已有一段很长的时间,而让logofish君吃惊的不是谷歌LOGO有多漂亮,而是谷歌LOGO为何能做到如此之小,今天我们就一起分析分析。

谷歌新旧Logo

谷歌新旧Logo对比


谷歌换logo已经有一段时间了,对于更换Logo的问题,大家讨论的最多的是到底新老Logo哪个更好看。

但也有个别同学注意到了一个事实:谷歌的新Logo只有305字节那么大,而老的Logo则有14000字节。

咳咳,按照谷歌的网络流量,单单一个Logo就能为整个互联网省下不少带宽啊。新Logo为什么就这么小呢?


谷歌的旧Logo使用了serif字体,而这类字体只能通过贝塞尔曲线来创建。如下图所示,从谷歌的Logo可以看到,旧Logo有多达100个锚点,因此最终产生的的Logo文件达到约6Kb(6380 字节)大小也不足为奇。进行压缩以后,Logo的大小大约 2 KB (2145字节)大小。

谷歌旧Logo

谷歌旧Logo


谷歌新版的Logo在进行了大量简化,除了小写的字母g以外,其他字母均可以由圆形和矩形构造出来。如下图所示:

谷歌新Logo

谷歌新Logo


整个新Logo由如下部分组成:


10个圆形。(大写字母G占2个圆,小写字母g占2个圆,字母e占两个圆,每个字母O占2个圆)。

5个矩形。(大写字母G占2个矩形,小写字母g占1个矩形,字母e占两个矩形)。

一个由7个锚点组成的图形(小写字母g的下半部分)。


我创建了大写字母G的SVG矢量图,生成的文件大小是302字节,压缩后只有195字节。如下是未压缩的图形代码(由两个矩形和两个圆构成)。


<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所示。

google谷歌LOGO

当然,还有另外一种绘制方式。我们可以使用strokes方式而不是fills方式来绘制Logo,这种方式最终产生的的文件更小,只有290字节。代码如下所示:


<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>


使用strokes的绘制方式,整个Logo只需要两个圆(两个字母O),四条路径(分别对应字母G、 g、l和e)即可绘制完成。如下图所示:

字母组成的谷歌LOGO

到这里你知道为何谷歌LOGO会如此之小了吧?LOGO小的好处就是可以减小网页体积,加快加载速度,这样就有着更好的用户体验。当然如果你不会CSS,那么现在智能时代的LOGO在线制作生成器也可以生成SVG格式的LOGO,体积也非常小,并且很清晰。

推荐阅读
Advert:[left_fixed_adv]