SVGO使用

在对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)