d屬性的運作道理
SVG能夠設計向量屬性，其中d屬性儲存形狀的資料，包含形狀的座標與曲線。無論多麼精緻，都能夠重現我們在Illustrator, Photoshop, After Effect製作的鋼筆或是Sketch的形狀。那它怎麼做到的呢？
我分成三步，一先儲存了起點，二儲存形狀中的每一個錨點，三設定封閉終點，就這樣而已。只是它儲存路徑有不同的指令，依據不同指令與數值建立曲線。搞懂那些指令就了解它怎麼記憶所有點。
<path d=”M10,10V37H25L40,51,63,37c18,0,30,11,30,25S82,83,82,83Q60,100,95,95T120,120Z” />像上面的Path路徑就儲存了一串英文與數字組成的資料，其中英文是指令，數字是座標。英文定義我怎麼畫的，數字定義我畫在哪裡。
一個指令右邊可以配零到七個數字，依照指令類型而定。指令類型分大小寫，大寫代表它接續的數字是圖片上的絕對座標，小寫代表與上個指令相對的座標。
d屬性的第一步－M
M設定起始座標，我們可以這樣寫:
<path d="M0,0">這代表一個點，一個起始點在XY軸0,0的位置，這樣就做出來了！但圖片中我們什麼都看不到，畢竟只是一個點而已，還不是一個面。
d屬性的第二步－繪製沿途錨點
指令我們分兩大類，一大類是直線，一大類是曲線，先以直線做例子：
指令H指令接一個數字代表X軸平移多少，V指令接一個數字代表Y軸垂直移多少，L代表則是XY軸水平垂直移多少。注意大寫代表絕對座標，小寫是相對座標。舉個例子：
<path d=" M10,10 H20 L10,20 V10 "/>意思是，M10,10表示建立10,10的起點，H20表示X軸移到座標20,10，接下來L10,20代表Y軸移到座標10,20，V代表Y軸移回到座標10,10，也就是起點。路徑會長這樣：
如果指令是小寫呢？它將成為相對位置，所謂的相對是指該指令前一個點所相對的地方。如果數字不變，將指令變成小寫將變成下圖：
<path d=" M10,10 h20 l10,20 v10 "/>
d屬性的第三步－封閉路徑
沿途錨點畫完後，加上一個Z指令，代表封閉這個路徑，無論目前畫到哪裡，也就是從這個點連回去起點。
<path d="M0,0H10V10H0V0Z">這樣一個路徑就完成了，超簡單的，當然最難的是曲線啦
曲線
曲線的指令很多，有C,S,Q,T，最簡單的是有六個數字各代表三個座標的C。
C代表Curve，有三個座標分別是第一個控制點，第二個控制點，與目的地。第一個控制點影響目前位置，第二個控制點影響目的地。例如這段就代表四個控制點：
<path fill="#000000" d="M0,0c0,50,50,50,50,0"/>
S代表Smooth curve，想像成是C的縮寫。第一個是影響目的地的控制點，第二個是目的地。影響目前位置的控制點被省略了，但它還是存在的，它是前一個指令的控制點的鏡射。
Q代表Quadratic Bézier curve，Quadratic Bézier curve是一個只有一個控制點的曲線，也就是目前位置與目的地會共享同一個控制點，這不是兩個控制點都在一樣的位置。它對於錨點的影響力較低。第一個點是兩個控制點的位置，第二個點是目的地。
Quadratic Bézier curve與其他curve的差別：
T是Smooth quadratic Bézier curve之意，結合Q與S的特色，也就是說，它像Q一樣只有一個控制點，而且像S一樣這個控制點還被省略了！它只有一個座標要設定，也就是目的地，是相當簡略的指令。
最後一個曲線是製作橢圓形曲線的指令A，橢圓形曲線需要一個橢圓形、角度、最大弧或最小弧，還有順時針或逆時針方向，這個比較需要較深的數學底子，如果是要從Illustrator或是Sketch匯入一個形狀或匯出一個形狀時，比較步常用到，有興趣可以參考官方文件https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs
指令的使用建議
在製作動畫上，完整的指令C能有完整的變形自由度
新手可使用C指令，因為較為完整，在修改時也比較好理解。像是在SVG中的<animate>製作動畫，讓路徑變形時，它會要求每個關鍵影格的錨點數要一樣，指令也要相同。如果是過於簡化的指令，就不太能在變形時有很高的自由度。例如我要從一個圓形變成梅花，圓形可以C與S並用，但梅花呢？我們沒辦法確保動畫在下一個形狀能夠讓S省略其中一個控制點，並完成我們的動畫時，我們就需要斟酌考慮一下。
絕對座標與相對座標？這將跟互動息息相關
指令大寫是絕對座標，指令小寫是相對座標（相對前一個錨點），這代表當我用Javascript製作SVG點擊或其他觸發事件的反應時，我需要繪製多少個d屬性。
例如我製作一個可以平移的半圓，是一個M指令是開頭以外其他都是小寫的路徑，我只要調整M的X座標，就可以移動整個形狀，不必每個指令的數值都調整；然而相反的，當我要製作一個變形的形狀，有部分會變，有部分不會，就適合在會變的地方使用大寫，不變的地方使用小寫，如此就能修改最少的數值。
以上次研究SVG整理的心得，希望能幫助到大家
