前言

随着项目中逐步使用svg替代图片，svg优化就显得非常有必要了。

那为什么要使用svg去替代图片呢？

主要有下面几个原因：

1. svg小啊，
2. 另外，就是毕竟是矢量图，可以适应各种环境。

目标

目前的使用目标就是：使用svg替代所有32位色值内的png图片。

场景

使用场景主要是两个：

1. 直接放到img标签上，
2. css的background上。

最后，都要求使用base64字符串，不过这都在打包过程中做。

优化

上面说了很多，就是为了引出“优化”这个话题。

我们很多svg都是UI同学通过工具生成的，本身有非常多的冗余信息。

那如何优化呢？

可以确切知道的一点就是最终我们生成的base64字符串。

第一步：通用优化

主要是删除那些明显冗余的信息，比如：

1. 注释
2. 无用的标签：title, desc, metadata
3. 不必要的换行

第二步：删除不必要的属性

1. id和title
2. xmlns相关属性

进一步优化

通过上面的方式，优化就基本能有非常明显的效果的。

实际比较的极端的例子能压缩到原大小的1/2，不过大部分都在1/4左右。

那，是不是还可以进一步压缩呢？

svgo

然后在查找的过程中找到了这个svg优化库：https://github.com/svg/svgo

发现，你想到的，它都帮你考虑到了，你没有想到的他也帮你考虑到了。

那除了这些之外，还有想到其他方式么？

多维度考虑

很多时候，如果思维仅仅只是局限于svg优化，你会发现你已经无路可走了。

但是，跳出这个圈子，你会发现更广阔的空间和视野。

那就是：

在传输过程的优化

我们知道，绝大部分有做过优化的网站，在传输过程中都是通过Gzip压缩去做的。

那么，把相同的代码尽可能的放到一块，那压缩比例就非常可观了。

不一样的写法

我们知道HTML发展一直强调的是向下兼容，很多不推荐的写法，也是可以用在这块的，比如：

1. 属性不加双引号：<svg width=300 height=300 ...>...</svg>
2. 属性之间不加空格：<svg width="300"height="300"...>...</svg>

那这么一来，你会惊讶到竟然还可以这样，确定不错！

最后

推荐看一篇文章：https://www.clicktorelease.com/blog/svg-google-logo-in-305-bytes/

里面阐述的是：305B的Google还可以压缩么？

非常值得一读。