SVG精简压缩工具svgo简介和初体验

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=5278

一、事情的起因

佛家讲求因果关系，种什么因，得什么果，比方说种了颗苹果树，就会结苹果。这里，扯到SVG的精简压缩也是有原因的，前年有分享过“PSD小图标变身SVG Sprites/font-face历险记”，其中展示了我处理SVG比较重要的一步，就是对设计师PSD源文件中的图标路径进行重新处理。在没有对设计师进行分享培训之前，有些细节可能就不会注意，例如，图形喜欢用路径叠加实现，而不是实实在在地勾勒出来；或者PSD看上去是好的，但是放大个100倍，就会发现，路径的转角和边缘都没对上。此时如果直接SVG，一是SVG文件大小大，二是最终的图像可能不是我们想要的。因此，需要在Adobe Illustrator中重新处理下，至少我是使用的这个软件。

有小伙伴可能会疑问：设计师自己挖的坑就让他自己去种苹果树好了，你佛光普照去帮忙光合作用干什么呢？

佛约：我不入地狱输入地狱。大家都听过这句话吧，所以，我们再看上面的疑问，怎么样，是不是听之有理，实则差矣！我呸……甩自己一个嘴巴子，“差”它个鬼大头……

“我不入地狱输入地狱”这种骗傻子自我安慰的话你也信，偶尔帮帮设计师同事那是可以的，搞搞关系以后有糖吃，虽然新郎不是你；但是，每每都是你来帮设计师修修补补设计失误，看上去是个好人，实际上，是拉低了整个团队的效率，你的时间应该用在更大价值的事情上。

当然，并不是要你直接撒手不管，而是直接授之以渔，你要做的事情，是好好地准备一次分享培训，在例会的时候给各位设计师GGMM科普下，首先SVG前程似锦，大家了解下面的技能以后好混饭吃；其次，大家作图要多多留心，路径细节，少用锚点；最后，传授AI处理细节和SVG导出大法。然后，把导出SVG的工作全部交给设计师同事，设计师玩AI很多年了，比你前端半吊子要强很多，效率也会高很多，物尽其用。身为前端的我们，就要做前端应该做的事情，什么呢，就是对设计师给我们的初稿SVG进行web化精简，当然是通过技术手段。

为何需要精简呢？因为，很多矢量编辑器，或者类似AI这样的矢量软件，导出来的SVG文件都会有很多其他冗余信息，举个例子，下面截图框框的这些鬼：

虽然icomoon.io这样的在线平台自动精简。

但是，1. 如果我们想要直接使用SVG文件怎么办？2. SVG文件需要频繁改动怎么办，每次都上传一边再下载很烦的？3. 你保证其他同事其他团队也乐于使用这些平台，而不是直接根植于项目中？

考虑到这些点，我们有必要在本地有一个可以方便对SVG进行精简的工具，最好，AI保存好，直接就出来精简版。有吗？有，就是本文要介绍的svgo, 精挑细选，业界比较认可，大家比较喜欢的SVG处理工具。

二、svgo简介

项目地址：https://github.com/svg/svgo, 目前4000+星星~ 随着SVG的高歌猛进，以后一定会平稳增加。

svgo是SVG Optimizer的简写，不过，我似乎更喜欢理解为SVG, go! 这是一个基于Nodejs的SVG文件优化工具。

为什么需要？
因为SVG文件，尤其从各种变假期导出的SVG，通常包含大量的无用信息，例如编辑器源信息，注释，因此元素，默认或者非最优值，以及其他一些不会影响渲染结果的可以移除或转换的内容。

能做什么？
SVGO基于插件模式构建，基本上所有的优化都是一个分离的插件。

目前有：

• [ cleanupAttrs ] 清除换行，结束符以及重复空格
• [ removeDoctype ] 删除文档声明
• [ removeXMLProcInst ] 删除XML处理指令
• [ removeComments ] 删除注释
• [ removeMetadata ] 删除源信息
• [ removeTitle ] 删除