微信小程序里使用SVG矢量圖標(biāo)方法詳解
在微信小程序開(kāi)發(fā)過(guò)程中需要在小程序里使用SVG矢量圖標(biāo)，至于為什么要使用SVG圖標(biāo)相信看到這篇文章的你應(yīng)該明白，如果你不明白請(qǐng)百度一下
微信小程序里使用SVG矢量圖標(biāo)有2種引入方法：
一、SVG圖標(biāo)轉(zhuǎn)換為BASE64編碼
使用 http://tools.jb51.net/transcoding/img2base64 工具把需要引入的SVG圖標(biāo)轉(zhuǎn)換成BASE64編碼
注意：生成BASE64編碼時(shí)需要把開(kāi)頭的 data:image/svg; 修改成 data:image/svg+xml; 這個(gè)在線工具的問(wèn)題，使用其它在線BASE64編碼功能時(shí)大家一定要注意
復(fù)制轉(zhuǎn)換后的編碼至wxss文件中相應(yīng)的 background-image:url("SVG圖標(biāo)BASE64編碼") 中，如下代碼
.svg{background:url("data:svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAIAAAAhotZpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+2T3kLSMg8LC1QJzR/Dv3t/jrmSE9K/tTuKTbVJF1LQ93QcQG6L6nPEkWqECzSEhhiahTSNGLN0KKH4yG1CDLmhCN8EMskTdhAEXqaofsy9LWqNOCmeEgtgJRZZOF4EA0DlnSoC642kfxdQ+o+S1IOeURyXlRtSxVlJN3Ykve1Eaqwyvs2WuhQYC8Sq7nVDhYb6QhzJlL9rxkltKKokZKLdEhHB8l8OdRUNG6qsQ9sclBHkZ6k7Ojc0jJaSfLqYCG+g3h1E99dDnm+P2oJetK2VLClE7LNtigHIBZI8mpOiGb0EebGhojVQl1xj5FXRSITP8YpRBpYFhiOKJlgJq9oKs3xhA+kB5UvppaOxhxJ0zGxMxDMkDSTZkiaIWkmRUn6fwEGAE2xLmu6HJtTAAAAAElFTkSuQmCC");
width:100rpx;
height:100rpx;
background-size: contain
}
同時(shí)還需要添加 background-size: contain 屬性使圖標(biāo)能根據(jù)元素大小自動(dòng)縮放
然后在wxss對(duì)應(yīng)的wxml文件中添加
<view class="svg"> </view>
編譯后的效果
二、使用運(yùn)程地址引入SVG圖標(biāo)
把SVG圖標(biāo)上傳到網(wǎng)站服務(wù)器上，在瀏覽器中輸入SVG圖標(biāo)地址測(cè)試是否能正常打開(kāi)
復(fù)制SVG圖標(biāo)地址到 background-image:url(SVG圖標(biāo)URL地址) 如下
.svg{background:url(http://mt.com/coding.svg);
width:100rpx;
height:100rpx;
}
編譯后的效果
總結(jié)：
第一種方法直接把SVG圖標(biāo)BASE64編碼放到WXSS文件內(nèi)，這樣做會(huì)大大增加微信小程序的體積，如果要更換圖標(biāo)還需要重新編譯上傳，不推薦
第二種方法相比第一種方法不會(huì)增加小程序的體積，需要更換圖標(biāo)時(shí)上傳到服務(wù)器即可，非常靈活，推薦使用第二種方法
更多微信小程序開(kāi)發(fā)文章請(qǐng)點(diǎn)擊下方相關(guān)文章查閱
相關(guān)文章
今天跟大家聊聊棧，在程序設(shè)計(jì)中，棧的使用還是非常廣泛的，比如有“括號(hào)匹配問(wèn)題“，”html結(jié)構(gòu)匹配問(wèn)題“。所以說(shuō)掌握了”棧“的使用，對(duì)我們學(xué)習(xí)算法還是很有幫助的2013-11-11
VS Code提供了強(qiáng)大的擴(kuò)展功能，本文主要介紹了如何創(chuàng)建VS Code 擴(kuò)展插件，主要包括插件的創(chuàng)建、開(kāi)發(fā)和發(fā)布過(guò)程，具有一定的參考價(jià)值，感興趣的可以了解一下2022-01-01
VSCode程序猿彩虹屁插件rainbow fart體驗(yàn)篇
這篇文章主要介紹了VSCode程序猿彩虹屁插件rainbow fart體驗(yàn),本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
使用TeXLive2022和VSCode安裝配置步驟(LaTeX寫論文)
這篇文章主要介紹了使用TeXLive2022和VSCode的安裝配置步驟，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了windows下gitbash安裝教程(小白教程)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Clion ROS開(kāi)發(fā)環(huán)境設(shè)置技巧
這篇文章主要介紹了Clion ROS開(kāi)發(fā)環(huán)境設(shè)置技巧,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
Azkaban報(bào)錯(cuò)-azkaban.executor.ExecutorManagerException: No acti
這篇文章主要介紹了Azkaban報(bào)錯(cuò)-azkaban.executor.ExecutorManagerException: No active executors found,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了HTTPS的七個(gè)誤解,需要的朋友可以參考下2015-04-04
基于域名的方式訪問(wèn)Istio服務(wù)網(wǎng)格中的多個(gè)應(yīng)用程序的方法詳解
這篇文章主要介紹了基于域名的方式訪問(wèn)Istio服務(wù)網(wǎng)格中的多個(gè)應(yīng)用程序,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
這篇文章介紹了Git配置.gitignore文件忽略被指定文件上傳的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04