SVG压缩与字体图标新思路

已经很晚了，程序员，程序狗，爱学习不爱加班的我，还是在加班，在学习。为了涨工资，ping了。本节安利一个压缩SVG的工具：svgo。我们做前端的同学肯定都用过字体图标，有些特殊的字体图标需要视觉做个svg的矢量图，或者你也可以自己做个矢量图，需要学学adobe。我们做前端的同学肯定都用过字体图标，有些特殊的字体图标需要视觉做个svg的矢量图，或者你也可以自己做个矢量图，需要学学adobe illustrator,绘制个矢量图，然后保存成svg格式就可以了。然后用记事本打开保存的svg文件，你会发现有许多没有用的svg标签，这时候你需要一个svg压缩工具，可以帮你做这些事情。

SVG压缩 #

其实我的好奇心来自于goole的这个图片，这个是DATA URI, 单独用浏览器打开，发现是个svg，编码如下：

DATA－URI的格式为：
data: [][; base64]，
例如：
一个红色五角星形状的内联图片可以定义为:

所以把后面的一长串用base64解码之后呢，就得到：

于是乎，我有了一个新的思路，以后用svg做字体图标就更方便了，只要把svg图标转一下成data uri，然后字体就可以用这个img图片或者背景图。不过需要考虑通用性，如果用图片，那么每个地方都写一遍这个dataURI，明显是不合适的。如果用背景图片，那么控制大小颜色就不太方便。所以这个方法还是有问题。呵呵，我又把自己打败了。

压缩svg #

做这些事情之前呢，就是先用 illustrator制作矢量图，探后保存成svg，然后转成data uri。为了保证data uri不会太大，所以需要压缩处理一下svg格式的文件，去除没有用的数据。

参考资料：
(1) svgo
(2) SVG精简压缩工具svgo简介和初体验
(3) data uri