优化你的SVGs

我在博客文章中使用了很多SVG它们非常适合简单的图表或插图,例如:

优化你的SVGs

图1 从我的《从零开始的神经网络》系列开始

我使Inkscape(一种免费的开源矢量图形编辑器https://inkscape.org/制作SVG一开始,我只是使用默认的Inkscape格式(名为Inkscape SVG)来保存SVG事实证明这并不理想……

让我们以圆圈的SVG为例:

优化你的SVGs

图2 24*24圆形

以下为这个简单图标的InkscapeSVG标记:

<?xmlversion="1.0" encoding="UTF-8"standalone="no"?><!--Created with Inkscape (http://www.inkscape.org/) --><svg   xmlns:dc="http://purl.org/dc/elements/1.1/"   xmlns:cc="http://creativecommons.org/ns#"   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"   xmlns:svg="http://www.w3.org/2000/svg"   xmlns="http://www.w3.org/2000/svg"   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"   width="24"   height="24"   viewBox="0 0 24 24"   id="svg4242"   version="1.1"   inkscape:version="0.91 r13725"   sodipodi:docname="circle.svg">  <defs id="defs4244"/>  <sodipodi:namedview     id="base"     pagecolor="#ffffff"     bordercolor="#666666"     borderopacity="1.0"     inkscape:pageopacity="0.0"     inkscape:pageshadow="2"     inkscape:zoom="33.458333"     inkscape:cx="12"     inkscape:cy="12"     inkscape:document-units="px"     inkscape:current-layer="layer1"     showgrid="false"     units="px"     inkscape:window-width="1680"     inkscape:window-height="1005"     inkscape:window-x="0"     inkscape:window-y="1"     inkscape:window-maximized="1"/>  <metadata     id="metadata4247">    <rdf:RDF>      <cc:Work         rdf:about="">        <dc:format>image/svg+xml</dc:format>        <dc:type           rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>        <dc:title></dc:title>      </cc:Work>    </rdf:RDF>  </metadata>  <g     inkscape:label="Layer 1"     inkscape:groupmode="layer"     id="layer1">    <circle       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"       id="path4790"       cx="12"       cy="12"       r="12"/>  </g></svg>

哇。这是2 KB的标记,基本上没有任何内容。

最终(经过一段令人尴尬的时间?),我发现Inkscape具有Optimized SVG(优化SVG)输出格式,这更加合理。使用Inkscape的默认设置,优化的SVG标记为:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg id="svg4242"xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns="http://www.w3.org/2000/svg" height="24"width="24" version="1.1"xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"viewBox="0 0 24 24"><gid="layer1"> <circleid="path4790" cx="12"cy="12" r="12"/></g></svg>

不过,要画一个24×24的圆,仍然需要387个字节。这肯定不是路的尽头,对吧?

当然不是!我发现如何以OptimizedSVG格式保存文件并不值得在博客上发表。

SVG的最终演变是通过svgo(具体使用参考:https://github.com/svg/svgo实现的,svgo是一种流行的Node.js工具,专门用于优化SVG:

<svgxmlns="http://www.w3.org/2000/svg" width="24"height="24"><circle cx="12"cy="12" r="12"/></svg>

        102个字节! 这才像话。以下是三个版本的圆圈SVG渲染时的样子:

版本

大小

Inkscape SVG

2 KB

Optimized SVG

387字节

svgo最终版本

102字节

它们全都是纯黑色的圆圈,但是第三个比第一个占据的空间少20倍。缩小你的SVG


如何缩小svg

当然,我可以在任何要使用的SVG上手动运行svgo,但是我真正想要的是一种在构建时优化SVG的方法,因为:

1、    谁想要手动优化每个SVG?

2、    我想继续使用Inkscape SVG格式,它保留了一些有用的元数据(例如,在下次打开文件时保留会话)

这个博客是建立在Gatsby.js上的(一个Github上的开源项目),所以我写了一个简单的插件,名为gatsby-plugin-optimize-svgs(https://github.com/vzhou842/victorzhou.com),可以在构建输出中对存在的任一SVG运行svgo。且其安装很简单:

$ npminstall gatsby-plugin-optimize-svgs

 

gatsby-config.jsmodule.exports ={  plugins:[    // ...    'gatsby-plugin-optimize-svgs',  ],};

以下是我使用gatsby-plugin-optimize-svgs得出的结果:

缩小了62SVGs,总大小从459322字节减少到208897字节,减少了54.5%!总共是250 KB,即每个SVG 4 KB。请记住,我所有的SVG都已经以优化的SVG格式保存这些节省是在已经优化的SVG之上的。如果您以前从未考虑过缩小SVG,那么很有可能会看到更加惊人的结果。


现在轮到你了

去检查一下你的网站,他们有SVG吗?确保它们是最小的!



本文转载自:https://victorzhou.com/blog/minify-svgs/

作者:VictorZhou

翻译:张婕


本篇文章来源于微信公众号: TripDesign

UI/UX

不会用APP,会被骂智商有问题?

2019-11-4 8:15:00

UI/UX

入门交互设计的4个步骤(6000字长文)

2019-11-4 11:51:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索