↑點擊上方“紫邪隨筆”關(guān)注我

由于工作原因，最近接觸并了解了陌陌小程序。 太久沒有寫后端相關(guān)的代碼了，小程序本身也有很多bug，發(fā)現(xiàn)中間還有很多坑，慢慢梳理總結(jié)一下. 本文首先總結(jié)一下svg在小程序中的使用。

SVG簡介

什么是 SVG

SVG 是“”的縮寫。 英文可以理解為“可縮放矢量圖形”。 它是一種基于 XML 的圖形描述語言。 它是一種圖形格式，可用于描述靜態(tài)圖像、動畫和用戶界面。 1999年由萬維網(wǎng)聯(lián)盟發(fā)布，2013年成為W3C推薦標(biāo)準(zhǔn)。

SVG有什么優(yōu)點

與其他圖像格式相比，使用 SVG 的優(yōu)點是：

小程序中SVG的使用

由于上面提到的SVG的特性，它在各種開發(fā)中得到了廣泛的應(yīng)用，尤其適用于各種圖標(biāo)和圖標(biāo)。 下面將結(jié)合具體的開發(fā)記錄在小程序中使用SVG的過程。

獲取 SVG 資源

目前常用的設(shè)計工具如etc都支持將圖形導(dǎo)入為SVG。 其實如果沒有設(shè)計圖，如果只是一些常用的圖標(biāo)，也可以去一些資源站點下載。 以下是個人經(jīng)常使用的資源站點：

有大量基于設(shè)計的通用圖標(biāo)，支持導(dǎo)入為PNG、SVG等，如文章中的示例圖標(biāo)：

根據(jù)右側(cè)提示下載相應(yīng)圖標(biāo)的SVG資源

獲取對應(yīng)的SVG代碼

使用任意文本編輯工具打開資源，可以看到上面的代碼如下：

最里面的`fill="#"`是SVG的填充色，可以根據(jù)需要更改對應(yīng)的填充色（因為例子中的SVG比較簡單，所以只有一種填充色，沒有最里面的填充色所有 SVG 都是他的填充顏色）。 這部分代碼我們可以直接使用，也可以通過一些SVG優(yōu)化工具進(jìn)一步優(yōu)化。 目前我通常使用：

將SVG圖片直接推送到頁面左側(cè)的中，他會根據(jù)一些通用的優(yōu)化方法初步優(yōu)化SVG，點擊上面的``，看到我們的SVG代碼變了（其實是因為我們這里的示例圖標(biāo)比較簡單，主要是刪除代碼之間的無效空格：

將 SVG 代碼轉(zhuǎn)碼為編碼格式

由于陌陌小程序的限制，我們不能像web中那樣直接使用SVGsketch導(dǎo)出svg圖標(biāo)，只能通過css設(shè)置背景圖的形式來設(shè)置。 為此，我們首先需要將優(yōu)化后的 SVG 轉(zhuǎn)換為一種格式。 我通常使用以下地址：

打開網(wǎng)址后，將頁面向上推到右邊的位置，然后將之前生成的SVG代碼復(fù)制到輸入框中，發(fā)現(xiàn)SVG代碼已經(jīng)轉(zhuǎn)換成代碼了。

-image:url("data:image/svg+xml,→.04%25%='http://www.w3.org/2000/svg'%3E%d='M0'fill='無'/%3E%d='M19-1.110-2.9-21.1.8922.102-.92-2v-7h-3v2h3.59l-9.839.831.411..-7z'/%3E%3C/svg%3E") ;

如果直接復(fù)制里面的代碼，你會發(fā)現(xiàn)生成的代碼里多了一點：

`url("data:image/svg+xml,→.04%25%3Csvg`

代碼中的`→.04%25`為無效信息，需要自動刪除。 刪除后sketch導(dǎo)出svg圖標(biāo)，SVG代碼變?yōu)椋?/p>

-image:url("data:image/svg+xml,%='http://www.w3.org/2000/svg'%3E%d='M0'fill='none'/%3E%d ='M19-1.110-2.9-21.1.8922.102-.92-2v-7h-3v2h3.59l-9.839.831.411..-7z'/%3E%3C/svg%3E");

具體代碼中引用SVG

至此我們就完成了在小程序中使用SVG的所有規(guī)劃工作，接下來在代碼中使用它與在普通css中引用SVG沒有太大區(qū)別。 具體代碼如下：

-索引.wxml：

 ?
 ?在新窗口打開

-index.wxss:

.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;
}

- 療效證明：

相關(guān)資源

OK，至此我們就實現(xiàn)了陌陌小程序中SVG資源的使用。 文中涉及的所有代碼均已開源，相關(guān)鏈接如下：

努力學(xué)習(xí)技術(shù)，勤于做精品

如有侵權(quán)請聯(lián)系刪除！