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

4顶
0踩

非技术

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

2015-09-08 16:28 by 副主编 mengyidan1988 评论(0) 有6408人浏览
谷歌
原文链接：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 项目相关人员的简要说明 [以下表的形式,将各类项目相关人员的基本情况进行说明, 以帮助开发团队更好地了解他们的情况.为每一类人员生成一张表格.] 代表 [列出该类...

  • 基于FPGA的四相八拍步进电机控制系统设计：集成交付、正反转、加速减速及调速功能

    内容概要：本文详细介绍了基于FPGA的四相八拍步进电机控制系统的开发过程。主要内容包括：1. 使用VHDL和Verilog编写LED显示屏驱动代码，用于显示角度、学号和姓名等信息；2. 实现步进电机的正反转控制，通过状态机管理相序变化；3. 开发加速减速控制模块，确保电机启动和停止时的平稳性；4. 设计调速功能，通过调节脉冲频率实现速度控制。此外，文中还讨论了调试过程中遇到的问题及其解决方案。 适合人群：对FPGA开发和步进电机控制感兴趣的电子工程师、嵌入式系统开发者以及相关专业的学生。 使用场景及目标：适用于需要高精度运动控制的应用场合，如工业自动化、机器人技术和精密仪器等领域。目标是帮助读者掌握FPGA控制步进电机的基本原理和技术细节。 其他说明：文中提供了详细的代码片段和调试经验分享，有助于读者更好地理解和应用所学知识。同时，作者还提到了一些实用技巧，如通过PWM调节实现多级变速，以及如何避免步进电机的共振问题。

  • Android开发：基于SQLite的日历备忘录记事本项目详解与实现

    内容概要：本文详细介绍了基于Android Studio开发的日历备忘录记事本项目，涵盖日历查看、添加备忘录、闹钟提醒和删除备忘录等功能。项目使用SQLite数据库进行数据存储，通过CalendarView、EditText、Button等控件实现用户交互，并利用AlarmManager和PendingIntent实现闹钟提醒功能。此外，项目还包括数据库的设计与管理，如创建DatabaseHelper类来管理数据库操作，确保数据的安全性和完整性。文章还探讨了一些常见的开发技巧和注意事项，如时间戳的使用、手势监听的实现等。 适用人群：适用于初学者和有一定经验的Android开发者，尤其是希望深入了解Android开发基础知识和技术细节的人群。 使用场景及目标：该项目旨在帮助开发者掌握Android开发的基本技能，包括UI设计、数据库操作、闹钟提醒机制等。通过实际项目练习，开发者能够更好地理解和应用这些技术，提升自己的开发能力。 其他说明：文中提到一些进阶任务，如用Room替换SQLite、增加分类标签、实现云端同步等，鼓励开发者进一步扩展和优化项目。同时，项目源码公开，便于学习和参考。

  • Matlab实现基于SVM-Adaboost支持向量机结合Adaboost集成学习时间序列预测的详细项目实例（含完整的程序，GUI设计和代码详解）

    内容概要：本文档详细介绍了一个基于SVM（支持向量机）和Adaboost集成学习的时间序列预测项目。该项目旨在通过结合这两种强大算法，提升时间序列预测的准确性和稳定性。文档涵盖了项目的背景、目标、挑战及其解决方案，重点介绍了模型架构、数据预处理、特征选择、SVM训练、Adaboost集成、预测与误差修正等环节。此外，文档还探讨了模型在金融市场、气象、能源需求、交通流量和医疗健康等多个领域的应用潜力，并提出了未来改进的方向，如引入深度学习、多任务学习、联邦学习等先进技术。 适合人群：具备一定机器学习基础的研究人员和工程师，特别是那些从事时间序列预测工作的专业人士。 使用场景及目标：①用于金融市场、气象、能源需求、交通流量和医疗健康等领域的复杂时间序列数据预测；②通过结合SVM和Adaboost，提升预测模型的准确性和稳定性；③处理噪声数据，降低计算复杂度，提高模型的泛化能力和实时预测能力。 其他说明：文档不仅提供了详细的理论解释，还附有完整的Matlab代码示例和GUI设计指导，帮助读者理解和实践。此外，文档还讨论了模型的部署与应用，包括系统架构设计、实时数据流处理、可视化界面、GPU加速推理等方面的技术细节。

  • #游戏之追逐奶酪123

    #游戏之追逐奶酪123

Global site tag (gtag.js) - Google Analytics