小程序加载svg图片

前言

小程序的组件中是没有支持SVG标签的。 可是在前端小伙伴的实际开发中，UED常常提供SVG图片过来，若是不想用引入iconfont的话，那么妹子我将介绍个很好用的方法。

SVG 简介

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失
• SVG 与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
• 适合各类icon和图标

去除 SVG 中不须要的代码

咱们知道 SVG 实际是由代码组成，能够将 SVG 图片直接用IDE打开(如sublime),能够查看并修改其颜色形状大小。

其中有不少 SVG 代码咱们能够去除，如注释、多余空格等等，能够用网站 jakearchibald.github.io/svgomg，来精简SVG：

将 SVG 转化成Base64

打开网站www.sojson.com/image2base6…来转Base64

接着在WXSS和WXML中使用

// Base64 在CSS中的使用
.box{
  background-image: url("刚刚转的Base64");
}
复制代码

// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />
复制代码

小程序中引用完成

参考资料

• raoenhui.github.io/wechat/2018…

Happy coding .. :)