6080YYY午夜理论三级,免费A级毛片在线播放不收费,国产婷婷一区二区三区

微信小程序開發(fā)之SVG的使用

發(fā)布者：深藍互聯(lián)

發(fā)布時間：2019-07-25

點擊：次

SVG 簡介

什么是SVG

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

SVG有哪些優(yōu)勢

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

SVG 可被非常多的工具讀取和修改
SVG 與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強。
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失

SVG在小程序中的使用

由于前面提到的SVG的特性，因此他被廣泛應(yīng)用于各種開發(fā)中，尤其適合各種icon和圖標(biāo)，下面就結(jié)合具體的開發(fā)記錄下小程序中使用SVG的過程。

獲取SVG資源

目前常用的設(shè)計工具例如sketch等都支持將圖形導(dǎo)出為SVG。當(dāng)然如果沒有設(shè)計圖，如果只是一些常見的圖標(biāo)的話也可以去一些資源站點下載。下面是個人常用的資源站點：

https://material.io/icons/

material上有大量基于Android的Material Design設(shè)計的一些通用圖標(biāo)，而且支持導(dǎo)出為PNG，SVG等，例如文章中的示例icon：

https://material.io/icons/#ic_open_in_new

根據(jù)下圖的提示下載對應(yīng)的圖標(biāo)的SVG資源

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

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

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path 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"/>
</svg>

其中最外層的 fill="#000000" 就是SVG的填充色，可以根據(jù)需求修改對應(yīng)的填充顏色（由于示例中的SVG比較簡單，因此只有一個填充顏色，并非所有SVG的最外層的fill都是他的填充色）。我們可以直接使用這部分代碼，也闊以通過一些SVG優(yōu)化工具進一步進行優(yōu)化。目前我一般使用：

https://jakearchibald.github.io/svgomg/

將SVG圖片直接拖入頁面右側(cè)的畫布，他會根據(jù)一些通用優(yōu)化方式對SVG進行初步優(yōu)化，點擊上方的 MAKEUP ，再看我們SVG的代碼已經(jīng)發(fā)生了變化（當(dāng)然這里由于我們的示例圖標(biāo)比較簡單，主要是刪除了代碼間的無效空白）：

<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path 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"/></svg>

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

由于微信小程序的限制，我們不能像在web中一樣直接使用SVG，只能是通過css，設(shè)置背景圖片的方式來設(shè)置。因此我們先要把優(yōu)化后的SVG轉(zhuǎn)化為Base64格式。我一般用下面的地址：

https://codepen.io/jakob-e/pen/doMoML

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

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ù)制了svgomg中的代碼，會發(fā)現(xiàn)生成的Base64代碼中多了一點東西：

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的所有準(zhǔn)備工作了，接下來在代碼中使用就和普通的css中引用SVG沒有太大區(qū)別。具體代碼如下：

index.wxml：

<view class="svg-demo-container">
    <text class="icon-open-new icon"></text>
    <text class="svg-demo-text">在新窗口打開</text>
  </view>

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

展示效果：

无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

13530005652