因?yàn)楣ぷ鞯脑?，最近開(kāi)始接觸和了解微信小程序。 已經(jīng)很久沒(méi)有寫或讀過(guò)前端相關(guān)的代碼了。 另外，小程序本身也存在不少Bug。 在這個(gè)過(guò)程中還發(fā)現(xiàn)了很多陷阱。 后面我會(huì)慢慢總結(jié)。 本文首先總結(jié)一下svg在小程序中的使用。

SVG 簡(jiǎn)介

什么是 SVG

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

SVG有什么優(yōu)點(diǎn)？

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

SVG在小程序中的使用

由于SVG的上述特點(diǎn)，它被廣泛應(yīng)用于各種開(kāi)發(fā)中sketch導(dǎo)出svg圖標(biāo)sketch導(dǎo)出svg圖標(biāo)，特別適合各種圖標(biāo)、圖標(biāo)。 下面將根據(jù)具體開(kāi)發(fā)記錄一下在小程序中使用SVG的過(guò)程。

獲取SVG資源

目前常用的設(shè)計(jì)工具如SVG都支持將圖形導(dǎo)出為SVG。 當(dāng)然，如果你沒(méi)有設(shè)計(jì)圖，只要有一些常用的圖標(biāo)，也可以從一些資源站下載。 以下是個(gè)人常用的資源網(wǎng)站：

基于設(shè)計(jì)的常見(jiàn)圖標(biāo)有大量，并且支持導(dǎo)出為PNG、SVG等，例如文章中的示例圖標(biāo)：

按照下圖提示下載對(duì)應(yīng)圖標(biāo)的SVG資源。

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

使用任意文本編輯工具打開(kāi)資源，可以看到里面的代碼如下：

最外面的`fill="#"`是SVG的填充顏色。 可以根據(jù)自己的需要修改對(duì)應(yīng)??的填充顏色（因?yàn)槔又械腟VG比較簡(jiǎn)單，只有一種填充顏色，不是所有SVG最外層的填充。都是他的填充顏色）。 我們可以直接使用這部分代碼，也可以通過(guò)一些SVG優(yōu)化工具進(jìn)一步優(yōu)化。 目前我一般使用：

將 SVG 圖像直接拖到頁(yè)面右側(cè)的畫布中。 它會(huì)根據(jù)一些常見(jiàn)的優(yōu)化方法對(duì)SVG進(jìn)行初步優(yōu)化。 點(diǎn)擊上面的``，可以看到我們的SVG代碼發(fā)生了變化（當(dāng)然，這里由于我們的示例圖標(biāo)比較簡(jiǎn)單，主要是去除了代碼之間無(wú)效的空白）：

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

由于微信小程序的限制，我們無(wú)法像在網(wǎng)頁(yè)上那樣直接使用SVG。 我們只能通過(guò)css來(lái)設(shè)置，設(shè)置背景圖片。 因此，我們首先需要將優(yōu)化后的SVG轉(zhuǎn)換為格式。 我通常使用以下地址：

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

-image: url("data:image/svg+xml, 228字節(jié)→203字節(jié) 89.04%25 %3Csvg xmlns='http://www.w3.org/2000/svg'%3E%d='M0' 填充='無(wú)'/%3E% d='M19 -1.11 0-2 .9-2 ??1.1.89 2 2 .1 0 2-.9 2-2v-7h- 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.-7z'/%3E%3C/svg%3E");

如果直接把代碼復(fù)制進(jìn)去，你會(huì)發(fā)現(xiàn)生成的代碼多了一點(diǎn)：

`url("數(shù)據(jù):image/svg+xml, 228 字節(jié) → 203 字節(jié) 89.04%25 %3Csvg`

代碼中的“228字節(jié)→203字節(jié)89.04%25”為無(wú)效信息，需要手動(dòng)刪除。 刪除后，SVG代碼變?yōu)椋?/p>

-image: url("數(shù)據(jù):image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg'%3E% d='M0' fill='none'/%3E% d='M19 -1.11 0-2 .9-2 ??1.1.89 2 2 .1 0 2-.9 2-2v-7h- 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.-7z'/%3E %3C /svg%3E");

具體代碼中參考SVG

至此，我們就完成了在小程序中使用SVG的所有準(zhǔn)備工作。 接下來(lái)，在代碼中使用它與在普通 CSS 中引用 SVG 沒(méi)有太大區(qū)別。 具體代碼如下：

- 索引.wxml：

 ?
 ?在新窗口打開(kāi)

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

- 結(jié)果顯示：

相關(guān)資源

OK，現(xiàn)在我們就實(shí)現(xiàn)了微信小程序中SVG資源的使用。 文章涉及的所有代碼均已開(kāi)源，相關(guān)鏈接如下：

努力學(xué)習(xí)技術(shù)，專心打造高品質(zhì)產(chǎn)品

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