一、概述
本项目提供了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
https://blog.csdn.net/wo_buzhidao/article/details/107181795