首先準(zhǔn)備一段svg代碼如下:

<svg t="1670404434181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1769" width="200" height="200"><path d="M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z" p-id="1770"></path></svg>

然后按照下面的格式更改

url('data:image/svg+xml;charset=utf-8,<svg t="1670404434181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1769" width="200" height="200"><path d="M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z" p-id="1770"></path></svg>')

也打開下面的網(wǎng)址轉(zhuǎn),
https://codepen.io/jakob-e/pen/doMoML
將svg代碼貼到下圖中紅線圈起來的位置,會(huì)自動(dòng)轉(zhuǎn)成base64,

然后將base64代碼部分復(fù)制下來放到瀏覽器里面打開,可以看到結(jié)果.

最后在小程序里面使用,如下

<view class="back"><text class="image"></text>支付</view>


.back .image{
	width:19rpx;height:34rpx;display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg t='1670404434181' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1769' width='200' height='200'%3E%3Cpath d='M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z' p-id='1770'%3E%3C/path%3E%3C/svg%3E");
	background-size: cover;
}

結(jié)果:
文章來源地址http://www.zghlxwxcb.cn/news/detail-504138.html

到了這里，關(guān)于微信小程序里面如何使用svg圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！