因為工作的原因，最近開始接觸并且了解微信小程序。太久沒有寫或者看過前端相關的代碼，加上小程序本身的bug也比較多，中間發(fā)現(xiàn)坑還是不少，后面逐漸整理總結一下。這一篇先總結一下svg在小程序中的使用。
SVG 簡介什么是SVG
SVG是” ”的簡稱。中文可以理解成“可縮放矢量圖形”。是一個基于XML的圖形描述語言。它是可以用于描述靜態(tài)圖、動畫，以及用戶界面的一種圖形格式。1999年由萬維網(wǎng)聯(lián)盟發(fā)布。于2013年成為W3C推薦標準。
SVG有哪些優(yōu)勢
與其他圖像格式相比，使用SVG的優(yōu)勢在于：
SVG在小程序中的使用
由于前面提到的SVG的特性，因此他被廣泛應用于各種開發(fā)中，尤其適合各種icon和圖標，下面就結合具體的開發(fā)記錄下小程序中使用SVG的過程。
獲取SVG資源
目前常用的設計工具例如等都支持將圖形導出為SVG。當然如果沒有設計圖svg text標簽 背景色設置，如果只是一些常見的圖標的話也可以去一些資源站點下載。下面是個人常用的資源站點：
上有大量基于的 設計的一些通用圖標svg text標簽 背景色設置，而且支持導出為PNG，SVG等，例如文章中的示例icon：
根據(jù)下圖的提示下載對應的圖標的SVG資源
獲取對應SVG代碼
使用任意文本編輯工具打開資源，可以看到里面的代碼如下：
其中最外層的 fill="#" 就是SVG的填充色，可以根據(jù)需求修改對應的填充顏色（由于示例中的SVG比較簡單，因此只有一個填充顏色，并非所有SVG的最外層的fill都是他的填充色）。我們可以直接使用這部分代碼，也闊以通過一些SVG優(yōu)化工具進一步進行優(yōu)化。目前我一般使用：
將SVG圖片直接拖入頁面右側的畫布，他會根據(jù)一些通用優(yōu)化方式對SVG進行初步優(yōu)化，點擊上方的 ，再看我們SVG的代碼已經(jīng)發(fā)生了變化（當然這里由于我們的示例圖標比較簡單，主要是刪除了代碼間的無效空白）：
將SVG代碼轉碼為編碼格式
由于微信小程序的限制，我們不能像在web中一樣直接使用SVG，只能是通過css，設置背景圖片的方式來設置。因此我們先要把優(yōu)化后的SVG轉化為格式。我一般用下面的地址：
打開網(wǎng)址以后，上推頁面到下圖位置，然后將之前生成的SVG代碼復制到輸入框中，發(fā)現(xiàn)SVG代碼已經(jīng)轉化為編碼。
background-image: url("data:image/svg+xml, 228 bytes → 203 bytes 89.04%25 %3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
如果是直接復制了中的代碼，會發(fā)現(xiàn)生成的代碼中多了一點東西：
url("data:image/svg+xml, 228 bytes → 203 bytes 89.04%25 %3Csvg`
代碼中的 228 bytes → 203 bytes 89.04%25 為無效信息，需要手動刪除，刪除以后的SVG代碼變?yōu)椋?/p>
background-image: url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
在具體代碼中引用SVG
至此我們就完成了在小程序中使用SVG的所有準備工作了，接下來在代碼中使用就和普通的css中引用SVG沒有太大區(qū)別。具體代碼如下：
在新窗口打開
.svg-demo-container {
margin: 50rpx;
width: 300rpx;
display: flex;
align-items: center;
}
.svg-demo-text {
color: #888896;
font-size: 26rpx;
margin-left: 9rpx;
}
.icon-open-new {
background-image: url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
background-size: cover;
}
.icon {
display: inline-block;
width: 50rpx;
height: 50rpx;
}
展示效果：
相關資源：
OK，至此我們就實現(xiàn)了在微信小程序中使用SVG資源。文章中涉及到的所有代碼已經(jīng)開源到，相關鏈接如下：