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

如何書寫

開篇說過，SVG 就是一個 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 標簽中帶有一個 viewBox 的屬性。這其實是 SVG 中一個很重要的概念，后面的縮放都會與它有關(guān)。

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

基本概念

簡單來說有 3 個基本概念：

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

我們接下來，一個一個的進行講解吧。

viewport

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

viewbox

定義 SVG 元素在 viewport 中的具體尺寸比例。假設有如下內(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]

默認情況下 SVG 是自動填充滿 viewport 的。注意，在 SVG 中，子標簽的所有尺寸都是不能帶單位的，因為初始單位就是根據(jù)上面兩個概念確定。

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

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

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

preserveAspectRatio

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

<align> [<meetOrSlice>]

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

其中，align 需要著重理解一下。首先，它的默認值為 xMidYMid，即為中點重合。

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

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

在這之前，我們需要了解一個公式–縮放比計算公式：

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 軸的縮放比例。

假設有下列情況：

<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 不同的取值，實際應用到 svg 里面的縮放比例是不同的。

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

所以針對不同的取值，基準比例也不同。

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

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

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

響應式 SVG

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

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

看個實際的例子吧：

<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 標簽并沒有帶上啥 width/height 屬性，只是簡單描述了 viewBox 的范圍而已。當然，里面的尺寸標準都是在這 viewBox 的范圍內(nèi)進行設置的。

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

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

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

上面沒有啥說的，后面我詳細說一下兩個比較重要的概念，分組和 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> 

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

Path

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

• 大寫: 參照的是絕對坐標，即，SVG 的右上角
• 小寫: 參照的相對坐標，即，前一個點的坐標。

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

線型

M/m

該使用定義起始點的，沒啥特殊的作用。

<path d="M10 10"/>

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

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)

看個例子吧：

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

該 path 實際上就是畫了一個正方形，寬 = 高 = 90。

Z/z

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

Z (or z)

而上面也可以進行相關(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 個參考點，下圖應該說比較確切表示了二次貝塞爾所需要的點。所以，C/c 需要定義三個點。

基本格式為：

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

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

基本格式為：

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

實際樣式圖為：

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

具體實例為：

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

Q/q

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

基本格式為：

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

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

起始點為 M 定義的點，例如：

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

T/t

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

T x y (or t dx dy)

如圖：

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

弧線

A/a

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

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

說實在的，這個比較復雜。因為，他畫橢圓的方式和我們平常不一樣，一般情況下，橢圓只要確定一個中心，然后是長短軸，然后是弧度范圍即可。

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

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

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

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

說實在的，這個是真 TM 復雜。。。

給一個參考 codepen。

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

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

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

分組

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

例如：

 <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 進行分組，并不會改變原有元素的在屏幕上展示的效果。

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

分組動畫

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

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

每種變換動畫之間是通過 空格或逗號 連接的。它的執(zhí)行順序是從右到左。為啥呢？實際上可以理解為，這就是幾個嵌套的 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 動畫