前言
小程序的組件中是沒(méi)有支持SVG標(biāo)簽的。
但是在前端小伙伴的實(shí)際開(kāi)發(fā)中，UED經(jīng)常提供SVG圖片過(guò)來(lái)，如果不想用引入iconfont的話，那么妹子我將介紹個(gè)很好用的方法。
SVG 簡(jiǎn)介
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
- SVG 與JPEG和GIF圖像比起來(lái)，尺寸更小，且可壓縮性更強(qiáng)。
- 適合各種icon和圖標(biāo)
去除 SVG 中不需要的代碼
我們知道 SVG 實(shí)際是由代碼組成，可以將 SVG 圖片直接用IDE打開(kāi)(如sublime),可以查看并修改其顏色形狀大小。
sublime
其中有很多 SVG 代碼我們可以去除，如注釋、多余空格等等，可以用網(wǎng)站 https://jakearchibald.github.io/svgomg，來(lái)精簡(jiǎn)SVG：
image.png
將 SVG 轉(zhuǎn)化成Base64
打開(kāi)網(wǎng)站https://www.sojson.com/image2base64.html來(lái)轉(zhuǎn)Base64
image.png
接著在WXSS和WXML中使用
// Base64 在CSS中的使用
.box{
background-image: url("剛剛轉(zhuǎn)的Base64");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />
小程序中引用完成
image.png
參考資料
Happy coding .. :)
