小程式載入svg圖片
阿新 • • 發佈:2018-12-10
前言
小程式的元件中是沒有支援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 .. :)