小程序加載svg圖片

前言

小程序的組件中是沒有支持SVG標籤的。
可是在前端小夥伴的實際開發中，UED常常提供SVG圖片過來，若是不想用引入iconfont的話，那麼妹子我將介紹個很好用的方法。

SVG 簡介

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
• SVG 使用 XML 格式定義圖形
• SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
• SVG 與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強。
• 適合各類icon和圖標

去除 SVG 中不須要的代碼

咱們知道 SVG 實際是由代碼組成，能夠將 SVG 圖片直接用IDE打開(如sublime),能夠查看並修改其顏色形狀大小。

其中有不少 SVG 代碼咱們能夠去除，如註釋、多餘空格等等，能夠用網站 https://jakearchibald.github.io/svgomg，來精簡SVG：

將 SVG 轉化成Base64

打開網站https://www.sojson.com/image2base64.html來轉Base64

接着在WXSS和WXML中使用

// Base64 在CSS中的使用
.box{
  background-image: url("剛剛轉的Base64");
}

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

小程序中引用完成

參考資料

• https://raoenhui.github.io/wechat/2018/09/10/miniAppSvg

Happy coding .. :)