文档章节

谷歌新Logo如何做到只有305字节

蛀虫
 蛀虫
发布于 2015/09/13 10:15
字数 761
阅读 225
收藏 11

google-logo-01

谷歌新旧Logo

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

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

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

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

google-logo-02谷歌旧Logo

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

google-logo-03

谷歌新Logo

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

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

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

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

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

[html] view plaincopy

  1. <svg xmlns="http://www.w3.org/2000/svg">                                                          

  2. <circle r="100" cy="100" cx="100" fill="#4885ed"/>  

  3. <circle r="70" cy="100" cx="100" fill="#ffffff"/>  

  4. <rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/>  

  5. <rect height="30" width="88" y="87" x="111" fill="#4885ed"/>  

  6. </svg>  


上面的代码生成的图形如下图右边的G所示。

google-logo-04

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

[html] view plaincopy

  1. <svg xmlns="SVG namespace" width="600" height="250">  

  2. <g stroke-width="16" fill="none">  

  3.   <path d="M173 102a51 51 0 1 1-13-30m20 37h-53" stroke="#4a87ee"/>  

  4.   <circle cx="227" cy="128" r="32" stroke="#d83038"/>  

  5.   <circle cx="313" cy="128" r="32" stroke="#f4c022"/>  

  6.   <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"/>  

  7.   <path stroke="#4ab95a" d="M449 51v115"/>  

  8.   <path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28" stroke="#d83038"/>  

  9. </g>  

  10. </svg>  


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

google-logo-05

出处:Quora    译文:code123  

本文链接:http://www.code123.cc/1723.html (转载请保留出处链接)

文章同步发布于csdn、code123、cnblogs!转载请保留出处!

© 著作权归作者所有

蛀虫
粉丝 2
博文 7
码字总数 1322
作品 0
东城
私信 提问
创作与google新logo相似的个人logo

谷歌新logo是svg格式描述的,小而美。不过没找到源码,网站上的是png。 但是那个动态的logo其实也是可以使用svg实现。 对svg不熟悉,只有使用网上编辑器。http://editor.method.ac/ 为每个字...

wffger
2015/11/01
111
0
谷歌推新图片格式WebP 比JPEG文件小40%

北京时间10月1日消息,据国外媒体报道,谷歌计划推出新图片格式WebP。与标准JPEG格式相比,新格式可以将图片文件的大小减少40%。 新款图片格式WebP基于谷歌WebM视频技术,预计将于今天发布。...

红薯
2010/10/01
1K
10
Apache Sqoop 1.4.0-incubating 发布

Sqoop是一个用来将Hadoop和关系型数据库中的数据相互转移的工具,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的数据导入到Hadoop的HDFS中,也可以将HDFS的数据导入到关系...

红薯
2011/11/30
926
0
精简压缩优化 Docker 镜像几百MB

转载:http://www.dockerinfo.net/3328.html 介绍 前段时间网易蜂巢曾经推出蜂巢 Logo T恤,用的正是 Docker 镜像制作,最神奇的是,它最终的镜像大小只有 585字节。 $ docker images grep h...

a1010256340
2018/04/26
0
0
Google 官方解释 Chrome logo 变化

Google今天就Chrome logo被拍扁一事做出官方解释。他们说一个更简单的logo更可以反应出Chrome浏览器的精髓──让网络更快、更轻量化、使用更简单。 Google解释说其实在使用老logo的时候,就有...

红薯
2011/03/22
2.6K
16

没有更多内容

加载失败,请刷新页面

加载更多

Java FOR-EACH循环

FOR-EACH循环使得代码更加的简短,也让代码更加易懂,其实他并没有加入什么新的功能。他的功能完全可以用简单的FOR循环代替。 for-each的用法: int a[] = {1,2,3,4,5,6} for(int s:a){ Syst...

无名氏的程序员
29分钟前
3
0
使用HTML5的History API

本文转载于:专业的前端网站➣使用HTML5的History API   HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代...

前端老手
31分钟前
4
0
JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
今天
7
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
今天
101
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部