在对svg文件进行解析压缩时使用到了svgo这个插件,碰到一些坑做下记录
使用svgo时需要注意版本,2.0以前支持yml配置文件,2.0以后不再支持yml,只支持js配置文件,并新增了extendDefaultPlugins方法
//v1.x用法
import SVGO from 'svgo'
//注意full属性,在这个版本中full为true表示覆盖svgo默认的插件配置
//为false时则将你配置的和svgo的合并
//需要注意的full为false时,svgo内部使用了node的fs模块,所以在浏览器端使用会报fs找不到
//plugins写法分两种情况,共三种写法
//一、字符串:当为字符串时,svgo会加载这个插件,但是这个插件会不会开启是读取svgo的默认配置
// 如removeAttrs默认是不开启的,所以你配置了removeAttrs,svgo会把他引进来,但不会用于解析
//二、对象(对象形式又分两种情况)
// 1.{'removeAttrs': false},这种情况就很明显了,值为Boolean类型,ture为开启,false为不开启
// 2.{'removeAttrs': {}},当值为object时(无论是空对象还是非空对象都是开启插件),这个值对象里
// 面可添加需要设置的参数:{'removeAttrs': {attrs: ['style', 'fill']}}
/*
plugins:[
{
'removeAttrs': false
},
{
'removeAttrs': {} //与'removeAttrs': true一致
},
{
'removeAttrs': {attrs: ['style', 'fill']}
},
'removeAttrs' //读取svgo默认配置
]
*/
let options = {
full: true,
plugins: [
{
removeAttrs: {
elemSeparator: ',', //解析属性分隔符
attrs: ['style', 'fill', 'xml:space']
}
}
]
}
let svgo = new SVGO(options)
let svgStr = '<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M245.1 184.5l362.8 362.8 100.3 100.3H436.9l-14.6 14.6-177.2 177.3v-655m-50-120.7v896.3l262.5-262.5h371.3L643.3 512 195.1 63.8z"/></svg>'
//在这个版本中optimize函数返回值是个Promise
//参数有两个,第一个是svg的内容,第二个这是配置,这个版本中基本不需要使用第二个参数了,具体看源码吧
svgo.optimize(svgStr).then(res=>{
//data就是svg的内容
console.log(res.data)
}).catch(e=>{})
v2.+法
//v2.x用法
import svgo from 'svgo'
//获取svgo默认的开启插件和手动开启的插件
//extendDefaultPlugins函数会将自己配置的插件覆盖svgo默认的插件配置后返回
const svgoPlugins = svgo.extendDefaultPlugins([
{
name: 'removeAttrs',
active: true,
params: {
elemSeparator: ',', //解析属性分隔符
attrs: ['style', 'fill', 'xml:space']
}
}
])
const option = {
multipass: true,
plugins: svgoPlugins
}
let svgStr = '<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M245.1 184.5l362.8 362.8 100.3 100.3H436.9l-14.6 14.6-177.2 177.3v-655m-50-120.7v896.3l262.5-262.5h371.3L643.3 512 195.1 63.8z"/></svg>'
//此处和v1.x版用法最大的区别就是optimize函数的返回值,其他都不变
//参数和v1.x版一致,此版第二个参数就可以使用了
const result = svgo.optimize(svgStr, option)
console.log(result.data)