前言

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

SVG 簡介

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

去除 SVG 中不需要的程式碼

我們知道 SVG 實際是由程式碼組成，可以將 SVG 圖片直接用IDE開啟(如sublime),可以檢視並修改其顏色形狀大小。

將 SVG 轉化成Base64

接著在WXSS和WXML中使用

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

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

參考資料

Happy coding .. :)