在微信小程序的开发过程中，需要在小程序中使用SVG矢量图标。至于为什么要用SVG图标，相信你应该理解这篇文章。如果你不明白，请问百度

在微信小程序中引入SVG矢量图标有两种方式：

1.SVG图标被转换为BASE64编码

使用http://tools.jb51.net/transcoding/img2BASE64工具将SVG图标转换为base64编码

注意：生成BASE64代码时，需要放入第一个data : image/SVG；将其修改为data : image/SVG XML；我们在使用其他在线BASE64编码功能时，一定要注意这个在线工具的问题

将转换后的代码复制到wxss文件中相应的后台-image : URL(“SVG图标BASE64代码”)，如下所示。SVG { background : URL(' data : SVG XML；base64，ivborw 0 ggoaaaansuheugaaaaaacmcaiahahotzpaaaagxrfwhrtb2z 0 D2 fyzbbzg9 izsbjbwfnzvjlywyw5 ccllpaaaa 3 zpvfh 0 we 1 omnv bs5 hzg9 iz s54 bxaaaaaaadw/ehbhyy2 tldcbizwdpbj 0 i77u/iibpzd 0 ivzvnme1 wq2voauh 6 cmvtek 5 uy3pryzlkij 8 2t3k LSM 8 lc1q宽度width:100rpxheight:100rpxBackground-size: contain}同时，您需要添加Background-size: contain属性，以便图标可以根据元素大小自动缩放

然后添加对应于wxss的wxml文件

view class=' SVG '/查看编译后的效果

其次，通过使用旅行地址来引入SVG图标

将SVG图标上传到网站服务器，在浏览器中输入SVG图标的地址，测试是否可以正常打开

将SVG图标地址复制到后台-image:url(SVG图标url地址)，如下所示。SVG { background : URL(http://mt.com/coding . SVG)；宽度width:100rpxheight:100rpx}编译后的效果

总结：

第一种方法直接将SVG图标BASE64放入WXSS文件，会大大增加微信小程序的体积。如果要替换图标，需要重新编译并上传，不建议这样做

与第一种方法相比，第二种方法不会增加小程序的大小，在需要更改图标时可以上传到服务器，非常灵活。建议使用第二种方法

更多微信小程序开发文章，请点击下方相关文章