SVG ( Scalable Vector Graphics ) 是 XML 的格式，可以用來繪製向量圖形，相較圖片來說，放大縮小時不會糊掉，適合使用在不需豐富色彩的幾何圖形

新增 SVG 元素

我們需要使用 SVG 時，可直接新增 svg 元素，並設定寬度與高度

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="black" />
</svg>

svg 內的 xmlns="http://www.w3.org/2000/svg" 是命名空間，不寫也是可以的，新增 svg 後便可在內部開始繪製圖形，其繪製方法與 css 有一些不同，以下介紹圖形繪製方法

矩形

<rect x="5" y="5" rx="10" ry="10" width="30" height="30" />

1. X: 矩形左上角的 X 軸位置
2. y: 矩形左上角的 Y 軸位置
3. width: 矩形的寬度
4. height: 矩形的高度
5. rx: 矩形圓角的 X 軸半徑
6. ry: 矩形圓角的 Y 軸半徑

圓形

<circle cx="35" cy="35" r="30" />

1. r: 圓形的半徑
2. cx: 圓心的 X 軸位置
3. cy: 圓形的 Y 軸位置

橢圓形

<ellipse cx="35" cy="35" rx="30" ry="10" />

1. rx: 橢圓形的 X 軸半徑
2. ry: 橢圓形的 Y 軸半徑
3. cx: 橢圓形中心的 X 軸位置
4. cy: 橢圓形中心的 Y 軸位置

直線

<line x1="10" x2="100" y1="10" y2="100" stroke="black" />

1. x1: 直線起點的 X 軸位置
2. y1: 直線起點的 Y 軸位置
3. x2: 直線終點的 X 軸位置
4. y2: 直線終點的 Y 軸位置

折線與多邊形

<polyline points="0 0,50 50, 100 0" fill="none" stroke="black" />
<polygon points="0 0,50 50, 100 0" fill="none" stroke="black" />

折線與多邊形皆是由 points 所繪製，每兩個座標為一組，分別代表 X 與 Y 座標，以逗號隔開，而兩者的差異在於，多邊形會將最後一點連回至起點，並封閉為一個圖形，而折線不會

路徑繪圖

<path d="M20 30 Q40 5,50 30 T90 30" fill="none" stroke="black" stroke-width="5" />

路徑繪圖可參考MDN，通過組合各種線條，基本上可以繪製出所有的圖形

基礎

1. M x y: Move to，將畫筆移動至指定點，後面接 x 軸與 y 軸位置
2. Z: 封閉圖形，將最後一點連回至起點

線條

1. L x y: Line to，畫一條線至指定點，後面接 x 軸與 y 軸位置
2. H x: 畫一條水平線，後面接 x 軸位置
3. V y: 畫一條垂直線，後面接 y 軸位置

貝茲曲線

1. C x1 y1, x2 y2, x y: 貝茲曲線，由兩個中介點與終點所組成，中間由逗號隔開
2. S x2 y2, x y: 接在 C 後方，產生與之前相同的曲線，再加上一個中介點與終點組成
3. Q x1 y1, x y: 二次貝茲曲線，由一個中介點與終點組成
4. T x y: 接在 Q 後方，產生與之前相同的曲線，後面接終點 x 軸與 y 軸位置

圓弧

A rx ry x-axis-rotation large-arc-flag sweep-flag x y: 這個參數較多，稍微複雜一些

1. rx: 圓的 x 軸半徑
2. ry: 圓的 y 軸半徑
3. x-axis-rotation: 圓旋轉的角度
4. large-arc-flag: 0 為角度較小的弧線，1 為角度較大的弧線
5. sweep-flag: 0 為逆時鐘，1 為順時鐘
6. x: 圓弧結束的 x 軸位置
7. y: 圓弧結束的 y 軸位置

若 rx 與 ry 小於半徑，則改為以比例方式呈現

填色、邊框與樣式

單純畫出路徑是看不到東西的，我們還要給它顏色與樣式，另外有些屬性可用 css 修改，有些則不行

<rect x="10" y="10" width="100" height="100"
      stroke="blue" fill="purple"
      fill-opacity="0.5" stroke-opacity="0.8"
      stroke-width="5" />
<line x1="40" x2="120" y1="20" y2="20"
      stroke="black" stroke-width="20"
      stroke-linecap="butt" stroke-dasharray="3,5,7" />

1. fill: 相當於 background-color，可使用的顏色同 css，預設為黑色
2. fill-opacity: 背景顏色的透明度
3. stroke: 相當於 border-color，可使用的顏色同 css
4. stroke-opacity: 邊框線的透明度
5. stroke-width: 邊框線寬度
6. stroke-dasharray: 將線條改為虛線，數字帶入線段距離與空白距離，以逗點分隔
7. stroke-dashoffset: 將線段往左或往右推移
8. stroke-linecap: 線條端點樣式，有 butt、square、round 共三種
9. stroke-linejoin: 線條接合樣式，有 miter、round、bevel 共三種

圖形部份大概如上，之後就是如何應用了 ~