# SVG 自學微筆記(09) - 路徑
###### tags: `2023` `SVG 自學微筆記`
> SVG 自學微筆記完! (๑´ㅂ`๑)
> 學習資源: [W3Schools](https://www.w3schools.com/graphics/svg_intro.asp)、其他網路資料
說到SVG中最複雜的東西，路徑(Path)絕對是一個大魔王，它有太多的commands可以用來定義路徑。透過Path雖然可以繪製效果不錯的SVG圖形，但是要自己定義一個個坐標點，再去把它們完美的串連在一起，實在是件非常困難的事。
W3Schools的SVG Path教學在最後提到，因為Path太複雜的關係，建議使用SVG Editor做圖形的設計，而非自己動手刻SVG的Path。儘管如此，稍微了解如何使用Path也能幫助看懂SVG圖形背後的邏輯與規則。
## SVG: 路徑
| 指令 | 意義(英) | 意義(中) |
| -------- | -------- | -------- |
| M | moveto | 移動路徑初始點 |
| L | lineto | 從當前點連線到另一點 |
| H | horizontal lineto | 從當前點水平連線到相同y坐標的一點 |
| V | vertical lineto | 從當前點垂直連線到相同x坐標的一點 |
| C | curveto | 從當前點畫貝茲曲線到指定點 (畫最基礎的貝茲曲線) |
| S | smooth curveto | 從當前點畫貝茲曲線到指定點 (與C同時使用，用處是鏡射前一個控制點) |
| Q | quadratic Bézier curve | 從當前點畫二次貝茲曲線到指定點 (共用控制點) |
| T | smooth quadratic Bézier curveto | 從當前點畫二次貝茲曲線到指定點 (與Q同時使用，用處是鏡射前一個共用控制點) |
| A | elliptical Arc | 畫橢圓圓弧 |
| Z | closepath | 關閉路徑 |
1. 要繪製貝茲曲線需要使用到"控制點"這個東西，至於控制點又是什麼呢? 簡單來說，可以把控制點視為控制曲線彎曲程度的點。
2. SVG Path的Commands有大小寫之分，大寫代表絕對位置(absolutely positioned)，小寫則是相對位置(relatively positioned)。以`M 100 0 L 100 150`和`M 100 0 l 0 150`為例，兩者都是從(100,0)連線到(100,150)，相對位置與絕對位置不同，它是以前一點做為出發位置並相對移動多少，可以想成在x、y上做加法計算。
### 範例1 - 基礎線
* M (moveto)
* 有2個可以帶入的參數x、y
* 移動起始點的座標
* L (lineto)
* 有2個可以帶入的參數x、y
* 從上一點連線到當前這一點
* Z (closepath)
* 沒有參數
* 關閉路徑，沒關閉路徑的話，描邊(Stroke)會有破洞
**有關閉路徑:**
移動初始點到(50,50)，然後連線到(200,200)，再連線到(50,200)，最後關閉路徑。
```html=
<svg width="500" height="500">
<path d="M 50 50 L 200 200 L 50 200 Z" stroke="pink" stroke-width="4" ></path>
</svg>
```
**沒關閉路徑:**
移動初始點到(50,50)，然後連線到(200,200)，再連線到(50,200)，最後不關閉路徑。
```html=
<svg width="500" height="500">
<path d="M 50 50 L 200 200 L 50 200" stroke="pink" stroke-width="4" ></path>
</svg>
```
### 範例2 - 水平線、鉛直線
* H
* 有1個可帶入參數x
* 從上一點水平連線到當前的x坐標
* V
* 有1個可帶入參數y
* 從上一點垂直連線到當前的y坐標
藍色水平線，移動初始點到(50,50)，然後水平連線到(200,50)。
紅色鉛直線，移動初始點到(100,60)，然後垂直連線到(100,200)。
```html=
<svg width="500" height="500">
<path d="M 50 50 H 200" stroke="blue" stroke-width="4" ></path>
<path d="M 100 60 V 200" stroke="red" stroke-width="4" ></path>
</svg>
```
### 範例3 - 曲線、平滑曲線 (C、S不共用控制點)
* C
* 有6個可以帶入的參數x1、y1、x2、y2、x、y
* x1、y1是貝茲曲線的第一個控制點
* x2、y2是貝茲曲線的第二個控制點
* x、y是曲線的終點
(圖片取自[SVG 研究之路 (4) - Path 基礎篇](https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html))
要畫出曲線，我們會需要透過控制點幫忙把曲線的彎曲弧度"拉"出來，上圖有2個控制點分別是(40,40)和(60,40)，曲線始於(0,0)在(100,0)結束。
```html=
<svg width="500" height="500">
<path d="M 0 0 C 40 40 60 40 100 0" stroke="blue" fill="transparent"></path>
</svg>
```
* S
* 通常與C同時做使用
* 有4個可以帶入的參數x2、y2、x、y
* x1、y1是鏡射前一個控制點 (以相同斜率產生，不必帶入參數)
* x2、y2是貝茲曲線的第二個控制點
* x、y是曲線的終點
(圖片取自[SVG 研究之路 (4) - Path 基礎篇](https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html))
要畫出曲線，我們會需要透過控制點幫忙把曲線的彎曲弧度"拉"出來，透過S可以只設定第二個控制點，而第一個控制點可以直接鏡射C的第二個控制點。
上圖使用C產生(0,0)到(100,0)的曲線，並使用S產生(100,0)到(200,0)的曲線，S那邊我們只給(150,-40)這個控制點，另外的控制點則直接複製(鏡射)前個控制點(60,40)的斜率產生，鏡射產生的控制點為(140,-40)。
```html=
<svg width="500" height="500">
<path d="M 0 0 C 40 40 60 40 100 0 S150 -40 200 0"
stroke="blue" fill="transparent"></path>
</svg>
```
### 範例4 - 二次曲線、平滑曲線 (Q、T共用控制點)
* Q
* 可以想成共用控制點的C
* 因為共用控制點，所以只需要一個控制點
* 有4個可以帶入的參數x1、y1、x、y
* x1、y1是貝茲曲線的第一個控制點(共用)
* x、y是曲線的終點
(圖片取自[SVG 研究之路 (4) - Path 基礎篇](https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html))
與前面畫出曲線都要用到二個控制點不同，使用Q我們可以指定一個共用的控制點就得以畫出曲線。上圖我們將(50,50)定為共用控制點，曲線始於(0,0)在(100,0)結束。
```html=
<svg width="500" height="500">
<path d="M 0 0 Q 50 50 100 0" stroke="blue" fill="transparent"></path>
</svg>
```
* T
* 可以想成共用控制點的S
* 因為共用控制點，所以只需要一個控制點
* 有2個可以帶入的參數x、y
* x1、y1是鏡射前一個共用控制點 (以相同斜率產生，不必帶入參數)
* x、y是曲線的終點
(圖片取自[SVG 研究之路 (4) - Path 基礎篇](https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html))
T和S有十分相似的地方，它們都會鏡射前一個控制點，可以減少自訂控制點的數量。而兩者間的不同之處在於，T是共用控制點，而控制點是複製(鏡射)前一個共用控制點(50,50)斜率產生，鏡射產生的共用控制點為(150,-50)
```html=
<svg width="500" height="500">
<path d="M 0 0 Q 50 50 100 0 T 200 0"
stroke="blue" fill="transparent"></path>
</svg>
```
**A**比上面所有的指令都還要複雜，有興趣可以看這篇文章[SVG 研究之路 (5) - Path 進階篇](https://www.oxxostudio.tw/articles/201406/svg-05-path-2.html)或其他資料自行研究，這邊就不再細說。
## SVG: 編輯器
相信看完上面的所有內容，應該絕大多數人都不想自己用Path去刻SVG圖形吧? 這個時候，我們可以借助網路上各種大大小小的SVG Editor，透過GUI拖拉產生圖形的方式，使用網站自動產生的SVG原始碼，而不必花時間完全搞懂上面這些指令在做什麼。不過使用網路上的資源固然方便，也別忽略潛藏的資安風險!
[Boxy SVG Editor](https://boxy-svg.com/app) 就是我在網路上隨便找到的一個SVG編輯器，在畫布裡面編輯圖形，下面的視窗就會自動產生SVG Path的原始碼供參考。
之後可能會出番外篇，用短篇說說我為什麼開始接觸、學習SVG。
## 參考資料
[SVG Path - W3Schools](https://www.w3schools.com/graphics/svg_path.asp)
[SVG 研究之路 (4) - Path 基礎篇](https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html)
[SVG 研究之路 (5) - Path 進階篇](https://www.oxxostudio.tw/articles/201406/svg-05-path-2.html)
Sign in with Wallet
Connect another wallet