资讯频道 → 非技术
阅读更多

4顶
0踩

非技术

转载新闻 Google新logo是如何缩减13000字节的

2015-09-08 16:28 by 副主编 mengyidan1988 评论(0) 有6355人浏览
谷歌
原文链接：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字节。

下面是整个未压缩版的绘图过程，包括两个圆形和两个矩形： 
<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字节： 
<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）就可以绘制完成。



  • 大小: 35.6 KB
  • 大小: 45.7 KB
  • 大小: 21.1 KB
  • 大小: 41 KB
来自: 杰微刊
4
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 怎样利用财务工具进行税务管理.pptx

    怎样利用财务工具进行税务管理.pptx

  • 敏捷开发FDD过程

    FDD过程 阶段一：开发一个总体模型  本阶段一个最基本的项目范围内的活动，就是在一个有经验的对象建模人员即主架构师的指导下，业务人员和开发小组成员一起工作。  业务专家们完成一个贯穿整个系统及其内外...

  • 图书馆职业有怎样的发展前景.pptx

    图书馆职业有怎样的发展前景.pptx

  • 软件文档编写向导

    在程序员的日常工作中，除了编写代码之外，还免不了需要编写各种技术文档。一个编写良好的技术文档在项目中能够很好地建立沟通与协作，起到很积极的作用。因此，编写技术文档也就成为了程序员技能提升的很重要的一面...

  • 【Docker】一条龙文档

    用 shell的命令即可 EXPOSE 当前容器对外暴露出的端口 WORKDIR 指定在创建容器后，终端默认登陆的目录，一个落脚点 USER 指定该镜像以什么样的用户去执行，如果都不指定，默认是root ENV 用来在构建镜像过程中设置...

  • 学习笔记：MyBtaisPlus学习文档

    README 大体上是照抄了视频里面的学习文档的。 对文档中一些过于冗杂的部分做了删减，并加入了自己在运行代码时遇到的问题以及解决方法，对于部分细节上的操作增加了解析。 对于之前我学过的，但是忘了的，个人有所...

  • 敏捷开发--特性驱动开发(FDD)

    什么是Feature: The unit of development and thus an increment in an FDD project - a feature - is tiny; … Features (tiny, granular pieces of client-valued function) are being completed every week ...

  • 软件工程需求分析文档模板

    需求分析类文档模板编者说明： 许多有经验的开发团队在开始需求调查的时候，总会将“软件客户需求权利书”和“软件客户需求义务书”提交给客户，让客户明确其权利与义务，将会对需求调研、分析的工作带来意想不到的...

  • ffmpeg翻译文档

    所有的数值选项，如果没有特殊定义，则需要一个接受一个字符串代表一个数作为输入，这可能跟着一个单位量词首字母，例如 "k" , "m" 或 "G" 如果 i 是附加到SI单位的首字母，完整的字母将被解释为一个2的幂数单位...

  • 特性驱动开发(FDD)

    什么是Feature: The unit of development and thus an increment in an FDD project - a feature - is tiny; … Features (tiny, granular pieces of client-valued function) are being completed every wee

  • 祭出你看过最良心的文档吧！

    这时候一份良心的文档就非常重要了。题主查看Google文档的时候，注意到底部有标明作者，也会默默为她点赞。咱们阿里云也有很多良心的文档。题主也很想知道默默细心为阿里云一众新手写文档的小哥是谁...

  • 需求分析类文档模板

    需求分析类文档模板编者说明： 许多有经验的开发团队在开始需求调查的时候，总会将“软件客户需求权利书”和“软件客户需求义务书”提交给客户，让客户明确其权利与义务，将会对需求调研、分析的工作带来意想不到的...

  • SASS官方文档

    使用 Sass 已经有几个月的时间了，翻来覆去还是在用几个简单的功能，下决心好好学习一下，所以翻译了官方文档。翻译的过程也是学习与积累的过程，深入理解了几个复杂功能，同时也补充了一些基础知识。只是官方文档写...

  • 关于用例须要多少文档以及业务用例等等

    敏捷中的文档该写多少合适，一直是永恒的话题，每一个用例故事的设计简要卡片，用例图，序列图，类图，数据字典，简要原型图，算法补充说明，应该是必要的吧，大家能够继续探讨 @袁斌_AgileDo @竹十一 @敏捷广州...

  • 【中级软考】什么是“敏捷过程的开发方法（敏捷方法agile）“（极限编程XP、特征驱动开发FDD、并列争球法Scrum、水晶法Crystal、开放源码法、自适应软件开发 ASD方法）

    十二个最佳实践2 特征驱动开发1．FDD 角色定义2．核心过程3．最佳实践3 Scrum1．Scrum 的五个活动2．Scrum 的 5 大价值观4 水晶方法5 其他敏捷方法开放式源码ASD 方法 敏捷方法 2001 年 2 月，在美国的犹他州，17 位...

  • 需求文档模板

    他们都是在什么样的工作环境中使用系统的 ] 3.5 项目相关人员的简要说明 [以下表的形式,将各类项目相关人员的基本情况进行说明, 以帮助开发团队更好地了解他们的情况.为每一类人员生成一张表格.] 代表 [列出该类...

  • 幼儿园安全教育管理.pptx

    幼儿园安全教育管理

  • 校园招聘模板 (2).pptx

    校园招聘模板 (2)

  • MATLAB SIMULINK搭建分布式驱动电动汽车模型，七自由度整车模型，包括横摆，纵向，侧向，四个轮胎四个自由度等等，转弯制动工况，包括abs模型 资料详细

    MATLAB SIMULINK搭建分布式驱动电动汽车模型，七自由度整车模型，包括横摆，纵向，侧向，四个轮胎四个自由度等等，转弯制动工况，包括abs模型。 资料详细。

  • 恒压供水一拖四（3+1）图纸程序 西门子YH100 1.恒压供水系统，采用西门子S 7-200smart PLC，西门子smart 700 IE触摸屏； 2.全新界面，三台主泵一台辅泵，水泵可自

    恒压供水一拖四（3+1）图纸程序 西门子YH100 1.恒压供水系统，采用西门子S 7-200smart PLC，西门子smart 700 IE触摸屏； 2.全新界面，三台主泵一台辅泵，水泵可自由屏蔽； 3.采用循环软启功能，PID控制，恒压更稳定，界面更高端； 4.并且有CAD柜体制作图纸，CAD电气图纸，图纸清晰，规范； 5.程序多年稳定运行，比市场上供水控制器无论质量还是外观画面都好几倍； 6.程序后，按图纸制作柜体，电气图纸接线，把PLC程序和触摸屏程序分别下载进去，调试即可使用； 7.可以改开机界面，加公司logo，等

Global site tag (gtag.js) - Google Analytics