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

最新推荐文章于 2020-05-22 00:12:46 发布

翻译最新推荐文章于 2020-05-22 00:12:46 发布 · 607 阅读

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

编者按：
有人在Quora上提问：Google的新logo是如何做到只有305字节的？旧logo的大小有14000字节之多。来自多伦多的UI设计师Ilya Yakubovich的回答1万+的投票。以下是杰微刊对其回答的完整译文。

之前的logo采用的是较为复杂的serif（衬线）字体，它只能通过贝塞尔曲线来构建。这样的话总共会有100个锚点，结果产生的就是一个6KB（6380字节）的文件。而压缩之后能达到2KB（2145字节）。

Google,Logo,设计

新logo是一个简化的版本，也就是说，几乎可以完全通过圆形和矩形来构建（小写字母g除外）。

Google,Logo,设计

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

这样就产生了下面右边的图形：

Google,Logo,设计

另外有一位用户指出，还有一种途径可以创建出新的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>
       