快捷導(dǎo)航

微信小程序里引入SVG矢量圖標(biāo)的方法

更新時(shí)間：2019年09月20日 10:27:19 作者：AngelLover2017

這篇文章主要介紹了微信小程序里引入SVG矢量圖標(biāo)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

引言

因?yàn)槲⑿判〕绦虻南拗?，引入外部圖片或者矢量圖，只能通過(guò)設(shè)置背景圖片background-image : url("base64轉(zhuǎn)碼后的代碼");的方式來(lái)進(jìn)行操作。同時(shí)還是因?yàn)槲⑿判〕绦虻南拗?，我們要先把svg的xml編碼轉(zhuǎn)碼為base64編碼

首先，說(shuō)明以下我們常見的svg矢量圖是什么？下面引用百度百科的話：

svg是基于可擴(kuò)展標(biāo)記語(yǔ)言（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集），用于描述二維矢量圖形的一種圖形格式

可能還是比較迷糊，那我們來(lái)看看，用記事本打開一個(gè)svg，里面的編碼是什么：

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg 
t="1532946882675" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" 
xmlns="http://www.w3.org/2000/svg" p-id="826" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" 
height="200"><defs><style type="text/css"></style></defs><path d="M914.75 
466.75L832 384V256a64.19 64.19 0 0 0-64-64H640l-82.75-82.75a64.19 64.19 0 0 
0-90.51 0L384 192H256a64.19 64.19 0 0 0-64 64v128l-82.75 82.75a64.19 64.19 0 
0 0 0 90.51L192 640v128a64.19 64.19 0 0 0 64 64h128l82.75 82.75a64.19 64.19 0 
0 0 90.51 0L640 832h128a64.19 64.19 0 0 0 64-64V640l82.75-82.75a64.19 64.19 0 
0 0 0-90.5zM512 736L320 384h96l96 192 96-192h96z" p-id="827" 
fill="#F36778"></path></svg>

好了，你看到了<?xml/svg11.dtd，那我們就明白了，這是一種由特定的DTD約束的xml文件，www標(biāo)準(zhǔn)組織定義了這個(gè)標(biāo)準(zhǔn)或者說(shuō)約束，來(lái)描述定義svg，所以我們可以知道svg其實(shí)就是xml的一個(gè)小子集。

步驟好了，下面介紹一個(gè)網(wǎng)站，用來(lái)將xml文件編碼轉(zhuǎn)碼為base64編碼：https://www.sojson.com/image2base64.html

1、在↑的網(wǎng)站的選擇組件中選擇需要轉(zhuǎn)換的svg，然后在網(wǎng)站下面的轉(zhuǎn)換框中復(fù)制轉(zhuǎn)換成功的base64格式的代碼

這里寫圖片描述