作者：凹凸曼 - 暖暖

SVG 即 Scalable Vector Graphics 可縮放矢量圖形，使用XML格式定義圖形。

一、SVG印象

SVG 的應(yīng)用十分廣泛，得益于 SVG 強(qiáng)大的各種特性。

1.1、 矢量

可利用 SVG 矢量的特點(diǎn)，描出深圳地鐵的輪廓：

1.2、iconfont

SVG 可依據(jù)一定的規(guī)則，轉(zhuǎn)成 iconfont 使用：

1.3、 foreignObject

利用 SVG 的 foreignObject 標(biāo)簽實(shí)現(xiàn)截圖功能，原理：foreignObject 內(nèi)部嵌入 HTML 元素：

<svg xmlns="http://www./2000/svg">
<foreignObject width="120" height="60">
<p style="font-size:20px;margin:0;">凹凸實(shí)驗(yàn)室 歡迎您</p>
</foreignObject>
</svg>

截圖實(shí)現(xiàn)流程：

1. 首先聲明一個(gè)基礎(chǔ)的 svg 模版，這個(gè)模版需要一些基礎(chǔ)的描述信息，最重要的，它要有 <foreignObject></foreignObject> 這對標(biāo)簽；

2. 將要渲染的 DOM 模版模版嵌入 foreignObject 即可；

3. 利用 Blob 構(gòu)建 svg 對象；

4. 利用 URL.createObjectURL(svg) 取出 URL。

1.4、SVG SMIL

由于微信編輯器不允許嵌入 <style><script><a> 標(biāo)簽，利用SVG SMIL 可進(jìn)行微信公眾號(hào)極具創(chuàng)意的圖文排版設(shè)計(jì)，包括動(dòng)畫與交互。
但是也要注意，標(biāo)簽里不允許有id，否則會(huì)被過濾或替換掉。

點(diǎn)擊 "凹凸實(shí)驗(yàn)室" 后，圍繞 "凹凸實(shí)驗(yàn)室" 中心旋轉(zhuǎn) 360度，點(diǎn)擊0.5秒后 出現(xiàn) https:/// ，動(dòng)畫只運(yùn)行一次。

下圖為 GIF循環(huán)演示：

代碼如下：

<svg width="360" height="300" xmlns="http://www./2000/svg">
    <g>
        <!-- 點(diǎn)擊后 運(yùn)行transform旋轉(zhuǎn)動(dòng)畫，restart="never"表示只運(yùn)行一次 -->
        <animateTransform attributeName="transform" type="rotate" begin="click" dur="0.5s" from="0 100 80" to="360 100 80"  fill="freeze" restart="never" />
        <g>
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">
                凹凸實(shí)驗(yàn)室
            </text>
        </g>
        <g style="opacity: 0;">
            <!-- 同一個(gè)初始位置以及大致的寬高，觸發(fā)點(diǎn)擊事件 -->
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">https:///</text>
            <!-- 點(diǎn)擊后 運(yùn)行transform移動(dòng)動(dòng)畫，改變文本的位置 -->
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.1s" to="0 40"  fill="freeze" restart="never" />
            <!-- 點(diǎn)擊0.5秒后 運(yùn)行opacity顯示動(dòng)畫 -->
            <animate attributeName="opacity" begin="click+0.5s" from="0" to="1" dur="0.5s" fill="freeze" restart="never" />
        </g>
    </g>
</svg>

以上是鄙人對SVG的大致印象，最近的需求開發(fā)再次刷新了我的認(rèn)知，那就是 SVG實(shí)現(xiàn)非比例縮放 以及 小程序不支持SVG標(biāo)簽的處理，下面容我來講述一番。

二、SVG 實(shí)現(xiàn)非比例縮放

我們熟知的 iconfont，可通過改變字體大小縮放，但是這是 比例縮放，那如何實(shí)現(xiàn) SVG 的非比例縮放呢？
如下圖所示，如何將 一只兔子 非比例縮放？

劃重點(diǎn)：實(shí)現(xiàn)非比例縮放主要涉及三個(gè)知識(shí)點(diǎn)：viewport、viewBox和preserveAspectRatio，viewport 與viewBox 結(jié)合可實(shí)現(xiàn)縮放的功能，viewBox 與 preserveAspectRatio 結(jié)合可實(shí)現(xiàn)非比例的功能。

2.1、viewport

viewport 表示SVG可見區(qū)域的大小。
viewport 就像是我們的顯示器屏幕大小，超出區(qū)域則隱藏，原點(diǎn)位于左上角，x 軸水平向右，y 軸垂直向下。

通過類似CSS的屬性 width、height 指定視圖大?。?/p>

<svg width="400" height="200"></svg>

2.2、viewBox

viewBox值有4個(gè)數(shù)字：x, y, width, height 。
其中 x：左上角橫坐標(biāo)，y：左上角縱坐標(biāo)，width：寬度，height：高度。
原點(diǎn)默認(rèn)位于左上角，x 軸水平向右，y 軸垂直向下。

<svg width="400" height="200" viewBox="0 0 200 100"></svg>

顯示器屏幕的畫面，可以特寫，可以全景，這就是 viewBox。
viewBox 可以想象成截屏工具選中的那個(gè)框框，和 viewport 作用的結(jié)果就是 把框框中的截屏內(nèi)容再次在 顯示器 中全屏顯示。

（圖片來源：SVG 研究之路 (23) - 理解 viewport 與 viewbox）

2.3、preserveAspectRatio

上圖的紅色框框和藍(lán)色框框，恰好和顯示器的比例相同，如果是下圖的綠色框框，怎樣在顯示器屏幕中顯示呢？

2.3.1、 定義

preserveAspectRatio 作用的對象是 viewBox，使用方法如下：

preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
// 例如 preserveAspectRatio="xMidYMid meet"

其中 defer 此時(shí)不是重點(diǎn)，暫且忽略，主要了解 align 和 meetOrSlice 的 用法：

• align：由兩個(gè)名詞組成，分別代表 viewbox 與 viewport 的 x 方向、y方向的對齊方式。

• meetOrSlice：表示如何維持高寬的比例，有三個(gè)值 meet、slice、none。

• meet - 默認(rèn)值，保持縱橫比縮放 viewBox 適應(yīng) viewport，可能會(huì)有余留的空白。

• slice - 保持縱橫比同時(shí)比例小的方向放大填滿 viewport，超出的部分被剪裁掉。

• none - 扭曲縱橫比以充分適應(yīng) viewport。

2.3.2、 例子

例子1：preserveAspectRatio="xMidYMid meet" 表示 綠色框框 與 顯示器的 x 方向、y方向的 中心點(diǎn) 對齊；

例子2：preserveAspectRatio="xMidYMin slice" 表示 綠色框框 與 顯示器的 x 方向 中心點(diǎn) 對齊，Y 方向 上邊緣對齊，保持比例放大填滿 顯示屏 后超出部分隱藏；

例子3：preserveAspectRatio="xMidYMid slice" 表示 綠色框框 與 顯示器的 x 方向、y方向的 中心點(diǎn) 對齊，保持比例放大填滿顯示屏 后超出部分隱藏；

例子4：preserveAspectRatio="none" 不管三七二十一，隨意縮放綠色框框，填滿 顯示屏即可；這就是非比例縮放的答案了。

三、小程序不支持svg標(biāo)簽怎么辦

微信小程序官方不支持 SVG 標(biāo)簽的，但是決定曲線救國，相當(dāng)于自己實(shí)現(xiàn)了一個(gè)SVG標(biāo)簽：使用小程序內(nèi)置的 Canvas 渲染器， 在 Cax 中實(shí)現(xiàn) SVG 標(biāo)準(zhǔn)的子集，使用 JSX 或者 HTM（Hyperscript Tagged Markup） 描述 SVG 結(jié)構(gòu)行為表現(xiàn)。

但是今天我想講講其他的。
我們知道，小程序雖然不支持 SVG 標(biāo)簽，但是支持 svg 轉(zhuǎn)成 base64 后作為 background-image 的 url，如 background-image: url("data:image/svg+xml.......) 。

但是我這邊還有個(gè)需求，隨時(shí)更改 SVG 每個(gè)路徑的顏色，即 顏色可配置：
顏色" loading="lazy">

來回轉(zhuǎn) Base64 肯定是比較麻煩的，有沒有更好的方式呢？
直接貼答案：對于SVG圖形，還有更好的實(shí)現(xiàn)方式，就是直接使用SVG XML格式代碼，無需進(jìn)行base64轉(zhuǎn)換。

3.1、URL 編碼

直接使用 SVG XML 格式代碼，首先要了解 Data URI的格式。
劃重點(diǎn)：base64非必選項(xiàng)，不指定的時(shí)候，后面的 <data> 將使用 URL編碼。

3.1.1、入門

百分號(hào)編碼(Percent-encoding), 也稱作URL編碼(URL encoding)，是特定上下文的統(tǒng)一資源定位符 (URL)的編碼機(jī)制。

原理：ASCII 字符 = % + 兩位 ASCII 碼（十六進(jìn)制）。
例如，字符 a 對應(yīng)的 ASCII 碼為 0x61，那么 URL 編碼后得到 %61 。

3.1.2、URL 編碼壓縮

前言：

Data URI 的格式中的 <data> 完全使用URL 編碼也是可以的，如 encodeURIComponent('<svg version="1.1" viewBox= …</svg>')。
但是和轉(zhuǎn)義前原始SVG相比，可讀性差了很多，而且占用體積也變大了。
如果深入了解URL 編碼的話，<data> 沒必要全部編碼的。

正文：

RFC3986文檔規(guī)定，URL中只允許包含 未保留字符 以及 所有保留字符。

• 未保留字符：包含英文字母（a-zA-Z）、數(shù)字（0-9）、-_.~ 4個(gè)特殊字符。對于未保留字符，不需要百分號(hào)編碼。

• 保留字符：具有特殊含義的字符 :/?#[]@ (分隔Url的協(xié)議、主機(jī)、路徑等組件) 和 !$&'()*+,;= （用于在每個(gè)組件中起到分隔作用的，如&符號(hào)用于分隔查詢多個(gè)鍵值對）。

• 受限字符或不安全字符：直接放在Url中的時(shí)候，可能會(huì)引起解析程序的歧義，因此這部分需要百分號(hào)編碼，如%、空格、雙引號(hào)"、尖號(hào) <>等等。

綜上所述，只需要對 受限字符或不安全字符 進(jìn)行編碼即可。

• JS 處理比較簡單，利用 replace 將 需要編碼的字符 替換掉 即可，基本替換 以下的符號(hào) 就夠用了：

svgToUrl (svgData) {
    encoded = encoded
      .replace(/<!--(.*)-->/g, '') // 親測必須去掉注釋
      .replace(/[\r\n]/g, ' ') // 親測最好去掉換行
      .replace(/"/g, `'`) // 單引號(hào)是保留字符，雙引號(hào)改成單引號(hào)減少編碼
      .replace(/%/g, '%25')
      .replace(/&/g, '%26')
      .replace(/#/g, '%23')
      .replace(/{/g, '%7B')
      .replace(/}/g, '%7D')
      .replace(/</g, '%3C')
      .replace(/>/g, '%3E')
    return `data:image/svg+xml,${encoded}`
  }

• 如果使用在 CSS 中，可利用 SASS版本3.3以上 的 三個(gè)API 對 SVG字符串做替換處理。

  前人已有總結(jié)，可前往 https://github.com/leeenx/sass-svg/blob/master/sass-encodeuri.scss 查看完整代碼。

1. str_insert(string, insert, index)： 從 $string 第 $index 插入字符 $insert；

2. str_index(string, substring): 返回 $substring 在 $string 中第一個(gè)位置；

3. str_slice(string, start_at, end_at = nil): 返回從字符 $string 中第 $start_at 開始到 $end_at 結(jié)束的一個(gè)新字符串。

3.2、SVG 壓縮

一般從 Sketch 導(dǎo)出 SVG ，冗余代碼比較多，有條件的話建議使用 SVGO 壓縮SVG的原本體積，比如清除換行、重復(fù)空格；刪除文檔聲明；刪除注釋；刪除desc描述等等。

四、總結(jié)

SVG強(qiáng)大的地方在于，出其不意，炫酷，與眾不同。

無論是微信公眾號(hào)花式排版，foreignObject 標(biāo)簽實(shí)現(xiàn)截圖，實(shí)現(xiàn)非比例縮放，或者 背景圖直接使用 SVG XML 格式代碼，還是上文沒有提及的路徑動(dòng)畫、描邊動(dòng)畫、圖形裁剪、濾鏡等等，都可以玩出新的花樣。