SVG 全稱是 Scalable Vector Graphics，即，矢量圖。在 Web 中使用 SVG 可以解決位圖放大失真的問題。首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他們之間并沒有你中有我，我中有你的關(guān)系。SVG 是通過 XML 的形式寫在 HTML 文檔中的。

如何書寫

開篇說過，SVG 就是一個(gè) XML。看一下代碼吧：

<svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100">
     <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/>
     <circle fill="white" stroke="black" cx="170" cy="50" r="45"/>
     <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62
      309,94 279,79 258,94 254,62 230,39 263,35"/>
     <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/>
     <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/>
</svg>

大家看 svg 標(biāo)簽中帶有一個(gè) viewBox 的屬性。這其實(shí)是 SVG 中一個(gè)很重要的概念，后面的縮放都會與它有關(guān)。

說到這里，我們就需要了解一下關(guān)于 SVG 的幾個(gè)基本概念。

基本概念

簡單來說有 3 個(gè)基本概念：

• viewport: 物理窗口
• viewbox: 實(shí)物窗口（算了，下面解釋）
• preserveAspectRatio: 保留橫縱比

我們接下來，一個(gè)一個(gè)的進(jìn)行講解吧。

viewport

參照上面的 demo，這實(shí)際上就是你用 x,y,width,height。這 4 個(gè)屬性，在頁面上固定的矩形區(qū)域。

viewbox

定義 SVG 元素在 viewport 中的具體尺寸比例。假設(shè)有如下內(nèi)容：

<svg width="500" height="200" viewBox="0 0 50 20" >
 <rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>
</svg>

• viewport 為 [0,0] 到 [500,200]
• viewbox 為 [0,0] 到 [50,20]

默認(rèn)情況下 SVG 是自動填充滿 viewport 的。注意，在 SVG 中，子標(biāo)簽的所有尺寸都是不能帶單位的，因?yàn)槌跏紗挝痪褪歉鶕?jù)上面兩個(gè)概念確定。

當(dāng)為以上情況，SVG 中基本的尺寸則不是 1px，而是 500/50 = 10px。所以，如下的圖形大小為：

<rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>

也就是在 SVG 里面定義的 rect 圖形，它的實(shí)際尺寸為 [200,100] 到 [100,50]。

preserveAspectRatio

該屬性就是用來定義上面 viewport 和 viewbox 相互對齊的方式。換句話就是說，它的屬性可以改變 viewbox 的具體位置?；靖袷綖椋?/p>

<align> [<meetOrSlice>]

• align: 定義 viewport 和 viewbox 的對齊方式，分為 x,y 軸兩個(gè)方向。X 軸方向有三種方式：左邊重合（xMin），x 軸中點(diǎn)重合（xMid），右邊重合（xMax）。同理，Y 軸也有 頂邊重合（YMin），y 軸中點(diǎn)重合（YMid），底邊邊重合（YMax）
• meetOrSlice: 主要就是定義該 SVG 是內(nèi)嵌，還是裁剪或是 none（聽天有命）。

其中，align 需要著重理解一下。首先，它的默認(rèn)值為 xMidYMid，即為中點(diǎn)重合。

可以從圖中看出，viewbox 是通過中心進(jìn)行延展的。注意，它的原點(diǎn)坐標(biāo)還是在 viewbox 的左上角。如果你是動態(tài)增加尺寸的話，此時(shí)并不是從左到右增加，而是從中心向兩端擴(kuò)張。同理，如果你使用的是 xMinYMin 的話，那么如果存在尺寸變化，那么相對點(diǎn)則是從左上角開始的。簡單來說，align 相對點(diǎn)其實(shí)一共有 9 個(gè)。

然后就是 meet || slice || none 這三個(gè)屬性具體干的事情。

在這之前，我們需要了解一個(gè)公式–縮放比計(jì)算公式：

vb_h * rat_y = vp_h; 或者 vb_w * rat_x = vp_w;

其中，vb_ 為 viewbox 簡寫，vp_ 為 viewport 的簡寫。vb_h 代表就是 viewbox height。vb_w 代表就是 viewbox width。rat_x/y 代表的是 x,y 軸的縮放比例。

假設(shè)有下列情況：

<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

那么，rat_x 和 rat_y 分別為：

• rat_x = 400/200 = 2
• rat_y = 200/200 = 1

現(xiàn)在，針對上面 meet/slice 不同的取值，實(shí)際應(yīng)用到 svg 里面的縮放比例是不同的。

• meet(默認(rèn)值): 本意是讓 svg 盡可能的顯示在 viewport 里，即，會在 rat_x 和 rat_y 中選擇最小的值作為縮放標(biāo)準(zhǔn)。
• slice: 本意是讓 svg 完全鋪滿 viewport，即，會在 rat_x 和 rat_y 中選擇最大的值作為縮放標(biāo)準(zhǔn)。

所以針對不同的取值，基準(zhǔn)比例也不同。

當(dāng)為 meet 的情況，那么實(shí)際縮放比例為 1。則里面實(shí)際矩形的大小就為 (10,10) 到 (150,150)。

當(dāng)為 slice 的情況，那么實(shí)際縮放比例為 2。則里面實(shí)際矩形的大小就為 (20,20) 到 (300,300)。

如果你的值為 none 的話，他會直接鋪滿整個(gè) viewport，即，實(shí)際矩形大小為：(20,10) 到 (300,150)。

響應(yīng)式 SVG

雖然講起響應(yīng)式，一些童鞋會想這 TM 又是啥奇技淫巧？

對不起，并不是。。。就是一個(gè) viewbox 并且不帶 width/height 而已。

看個(gè)實(shí)際的例子吧：

<svg viewBox="0 0 218.8 87.1">
     <g fill="none" stroke="#000">
       <path d="M7.3 75L25.9 6.8s58.4-6.4 33.5 13-41.1 32.8-11.2 30.8h15.9v5.5s42.6
         18.8 0 20.6" />
       <path d="M133.1 58.2s12.7-69.2 24.4-47.5c0 0 4.1 8.6 9.5.9 0 0 5-10 10.4.9 0
         0 12.2 32.6 13.6 43 0 0 39.8 5.4 15.8 15.4-13.2 5.5-53.8
         13.1-77.4 5.9.1 0-51.9-15.4 3.7-18.6z" />
</g> 
</svg>

可以看到，上面的 svg 標(biāo)簽并沒有帶上啥 width/height 屬性，只是簡單描述了 viewBox 的范圍而已。當(dāng)然，里面的尺寸標(biāo)準(zhǔn)都是在這 viewBox 的范圍內(nèi)進(jìn)行設(shè)置的。

另外，在這里聲明一下，本文章并不是新手教程，也就是說，不會教你一步一步的畫直線啊，圓啊，矩形啊等等這些基本圖形。這些直接 google 一下，一搜一大把。所以，這里假設(shè)大家的水平是處于，能對 SVG 基本的圖形屬性熟悉即可，對一些高級屬性還不是很清楚和熟練。OK，繼續(xù)~

在 SVG 中，能夠直接使用的圖形有:

• rect
• circle
• ellipse
• line
• polyline
• polygon

上面沒有啥說的，后面我詳細(xì)說一下兩個(gè)比較重要的概念，分組和 Path。

分組和 Path

通常 Path 和 分組通常是一起使用的，如上：

<g fill="none" stroke="#000">
    <path d="M7.3 75L25.9 6.8s58.4-6.4 33.5 13-41.1 32.8-11.2 30.8h15.9v5.5s42.6
      18.8 0 20.6" />
    <path d="M133.1 58.2s12.7-69.2 24.4-47.5c0 0 4.1 8.6 9.5.9 0 0 5-10 10.4.9 0
      0 12.2 32.6 13.6 43 0 0 39.8 5.4 15.8 15.4-13.2 5.5-53.8
      13.1-77.4 5.9.1 0-51.9-15.4 3.7-18.6z" />
</g> 

分組我們放到后面進(jìn)行講解，這里先看一下 Path。

Path

Path 在 SVG 中的地位應(yīng)該是比較高的，實(shí)際上，利用 Path 這個(gè)一個(gè)標(biāo)簽可以畫出任意的圖形。path 中 d(data) 屬性是用來定義相關(guān)線條數(shù)據(jù)，通常是以 M/m 為起始，代表的就是 move to 的意思。在 path 中，一共可以定義 10 種不同的圖形。例如 M/m，L/l。 大家可以注意，每種標(biāo)識符有兩種書寫方式，即，大小寫。

• 大寫: 參照的是絕對坐標(biāo)，即，SVG 的右上角
• 小寫: 參照的相對坐標(biāo)，即，前一個(gè)點(diǎn)的坐標(biāo)。

而在 10 中不同表示符中，又可以分為直線和曲線兩種不同的標(biāo)識符。這里，我們分類來講解一下。

線型

M/m

該使用定義起始點(diǎn)的，沒啥特殊的作用。

<path d="M10 10"/>

表示，以 (10,10) 為起始點(diǎn)。

L/l

原意是 Line to，用來畫線段的。格式和 M/m 差不多：

L x y (or l dx dy)

H/h

用來畫水平線，即，Horizontal。既然方向已經(jīng)定了，剩下的就是距離，格式很簡單：

H x (or h dx)

V/v

用來畫豎直線，即，vertical。同上，方向也定了，格式為：

V y (or v dy)

看個(gè)例子吧：

<path d="M10 10 H 90 V 90 H 10 L 10 10"/>

該 path 實(shí)際上就是畫了一個(gè)正方形，寬 = 高 = 90。

Z/z

該標(biāo)識符用來表示 path 的結(jié)束，并且將最后一點(diǎn)和 M/m 標(biāo)識開頭的一點(diǎn)連接起來。所以，它不存在什么表示點(diǎn)之類的，格式為：

Z (or z)

而上面也可以進(jìn)行相關(guān)的優(yōu)化，最終的結(jié)果為：

<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
// 使用 Z
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

曲線

曲線就是 Web 畫圖中常見的 Bezier Curves（貝塞爾），Arcs，several Bezier curves（很多貝塞爾 - .-）等。

我們簡單看一下：

C/c

這是正統(tǒng)的貝塞爾曲線，需要 4 個(gè)參考點(diǎn)，下圖應(yīng)該說比較確切表示了二次貝塞爾所需要的點(diǎn)。所以，C/c 需要定義三個(gè)點(diǎn)。

基本格式為：

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

例如：

<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

S/s

該標(biāo)識符實(shí)際上使用來表示一個(gè)反射貝塞爾，即，在原有貝塞爾上再加一段貝塞爾曲線，所以，S/s 一般和 C/c 一起使用。

基本格式為：

S x2 y2, x y (or s dx2 dy2, dx dy)

實(shí)際樣式圖為：

相當(dāng)于原有的貝塞爾曲線的最后一段進(jìn)行反向延長并對稱。然后加上新定義的一段限制曲線。

具體實(shí)例為：

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

Q/q

該標(biāo)識符是用來定義二次(quadratic)貝塞爾曲線，該曲線相當(dāng)于上面?zhèn)鹘y(tǒng)的貝塞爾來說，更加簡單，它只需要定義三個(gè)點(diǎn)，即可完整一個(gè)貝塞爾曲線，具體作圖過程如下：

基本格式為：

Q x1 y1, x y (or q dx1 dy1, dx dy)

即為圖上點(diǎn)， P1(x1,y1)，P2(x,y)

起始點(diǎn)為 M 定義的點(diǎn)，例如：

<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

T/t

該標(biāo)識符和 S 差不多，也是一個(gè)貝塞爾曲線的延長。相當(dāng)于原曲線的控制點(diǎn) P1 相當(dāng)于 end point P2 做對稱，然后，只需要定義一個(gè)終點(diǎn)即可，即，T/t 只需要定義貝塞爾曲線里面的終點(diǎn)即可：

T x y (or t dx dy)

如圖：

所以，簡單來說，C/S，Q/T 是兩兩搭配一起使用的。在使用的時(shí)候，千萬不要搞混即可。

弧線

A/a

該曲線是用來畫弧線(Arcs)，而，弧線通常是圓/橢圓的一部分。當(dāng)，橢圓的兩個(gè)軸徑長相等則為圓，所以，A/a 是按照橢圓作為基準(zhǔn)格式：

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

說實(shí)在的，這個(gè)比較復(fù)雜。因?yàn)?，他畫橢圓的方式和我們平常不一樣，一般情況下，橢圓只要確定一個(gè)中心，然后是長短軸，然后是弧度范圍即可。

但是，它這里是通過橢圓上的兩點(diǎn)來確定的，在加上旋轉(zhuǎn)角度，倆軸徑等因素來確定的。另外，需要注意，它的起始點(diǎn)是從上一個(gè)命令的結(jié)束點(diǎn)位置開始計(jì)算的。OK，我們首先簡單了解一下格式里面的參數(shù)：

• rx,ry: 代表的就是長軸短軸，沒得說。
• x,y: 代表的是弧長的結(jié)束點(diǎn)。開始點(diǎn)就是上一個(gè)命令的終點(diǎn)。
• x-axis-rotation: x 軸的旋轉(zhuǎn)角度。順時(shí)針為正
• large-arc-flag[0,1]: 表示取大弧還是小弧。因?yàn)閮牲c(diǎn)之間的弧長有兩部分。
• sweep-flag[0,1]: 取順時(shí)針的弧，還是逆時(shí)針的弧長。參考點(diǎn)是以起始點(diǎn)開始的。

上面幾個(gè)屬性中，比較難理解的就是 large-arc-flag 和 sweep-flag。這么說吧，前面幾個(gè)屬性充其量只能確定橢圓的位置，和經(jīng)過橢圓的兩個(gè)點(diǎn)，不過，一般能通過指定兩點(diǎn)的橢圓有兩個(gè)，而通過這兩點(diǎn)劃分又會出現(xiàn) 4 段弧長。為了確定 4 個(gè)弧長中，是哪一個(gè)，需要兩個(gè)值來確定。即，4 抽 2，2 抽 1。

簡單說一種，例如當(dāng)，laf 和 sf 都為 0的情況。首先，laf 為 0 選擇的是小弧長。所以，里面兩段比較小的弧長被抽出來。然后，sf 為 0 選擇的是逆時(shí)針。即，以起始點(diǎn)為參考，選擇通過逆時(shí)針方向到達(dá)終點(diǎn)的那段弧。即，2 抽 1。最終得出我們需要的弧。

說實(shí)在的，這個(gè)是真 TM 復(fù)雜。。。

給一個(gè)參考 codepen。

一般情況下，我們并不需要手動來確定 path，有工具為啥不用工具呢！

比如，Illustrator, Sketch 等，都可以自動生成 SVG。不過，生成之后，需要對代碼做相關(guān)的壓縮優(yōu)化，這些都可以直接在編譯器里面找到。

你也可以用一下可視化工具 SVGOMG 來簡單看一下。

分組

SVG 中的分組你可以理解為 PS 中的圖層，一塊圖層里面通常只會放一下高內(nèi)聚的圖形，這樣既方便移動又方便做動畫。SVG 中的分組標(biāo)簽就是 g，使用 g 標(biāo)簽包裹的所有子元素都認(rèn)同為一組。

例如：

 <g>
    <circle cx="20" cy="20" r="20" fill="green" />
    <circle cx="70" cy="70" r="20" fill="purple" />
  </g>
  <g>
    <rect x="110" y="110" height="30" width="30" fill="blue" />
    <rect x="160" y="160" height="30" width="30" fill="red" />
  </g>

需要注意的是，使用 g 進(jìn)行分組，并不會改變原有元素的在屏幕上展示的效果。

不過，g 標(biāo)簽除了分組，還有另外一個(gè)很重要的功能–動畫

分組動畫

在分組重定義動畫是直接寫在 transform 屬性當(dāng)中的。實(shí)際上，每個(gè)子標(biāo)簽都可以使用 transform 的相關(guān)屬性。

<g transform="translate(...) scale(...) rotate(...) translate(...) rotate(...)">
  ...
</g>

每種變換動畫之間是通過 空格或逗號 連接的。它的執(zhí)行順序是從右到左。為啥呢？實(shí)際上可以理解為，這就是幾個(gè)嵌套的 g 疊在一起。

<g transform="translate(...) scale(...) rotate(...) translate(...) rotate(...)">
    ...
  </g>
 
  // Being Equivalent to this:
  <g transform="translate(...)">
   <g transform="scale(...)">
     <g transform="rotate(...)">
       <g transform="translate(...)">
         <g transform="rotate(...)">
           ...
         </g>
       </g>
     </g>
   </g>
 </g>

具體可以使用的動畫形式和 CSS 動畫一模一樣，詳情可以參考: SVG 動畫