使用Svgo优化svg代码

一、概述

本项目提供了svg压缩处理优化功能。基于svgo实现。

npm run svgo

我们很多网上下载或者Sketch导出的svg会有很多冗余无用的信息，大大的增加了svg的尺寸，可以使用svgo对它进行优化，另外，有时候使用UI切图的svg无法直接修改内部的CSS样式，借用svgo工具可以完成样式的修改
比如下图所示的一个svg：

我们可以执行npm run svgo

无用的信息都被处理掉了。那具体如何做呢？按照下面的内容操作。

 

二、准备

1、安装svgo的npm包：

npm install svgo --save-dev

2、在package.json 脚本命令中加入"svgo": "svgo -f src/common/icons/svg --config=src/common/icons/svgo.yml"
上述命令中-f参数值指定了svg文件所在的目录，--config参数指定的是svgo的配置文件路径。
3、在控制台输入npm run svgo即可进行svg修改，修改后的svg不仅大小会 明显减少，而且也可以使用css样式进行修改。
4、如果需要更多地配置，可以通过在/src/icons/svgo.yml中进行修改。 

 

三、参考资料

https://panjiachen.github.io/vue-element-admin-site/zh/feature/script/svgo.html