# SVG 自學微筆記(01) - 初步認識 SVG

###### tags: `2023` `SVG 自學微筆記`

> 不定更新、可能爛尾XD

> 學習資源: [W3Schools](https://www.w3schools.com/graphics/svg_intro.asp)、其他網路資料

## 關於 SVG

SVG 全名為 Scalable Vector Graphics 即"可縮放向量圖形"，主要特點有這些 :

* SVG 圖形可自由進行縮放而不影響圖形的品質
* SVG 圖形可經由文字編輯器建立、編輯
* 因為 SVG 採用 XML 格式進行編輯，而 XML 是以純文字作為基礎的標記式語言
* SVG 是 W3C 的推薦標準

(除此之外 SVG 還有其他特點喔!)

## 淺談 XML

再補充一下XML是什麼吧! XML 是以純文字為基礎的標記式語言(Markup Language)，HTML也是一種標記式語言，但兩者間存在不少的差異，像是下面這些 :

1. 所有 XML 的 element 都需要被關閉或標記空白，但 HTML 的 element 未必都要被關閉，像是`<img>`就不用`</img>`，但是 XML 需要
2. HTML 有預先定義好的 element 名稱像是`<h1>`(無法自由調整定義)，但 XML 沒有預先定義好的 element 名稱，可以設計自己想要的 element 名稱 (不過以`xml`為名稱開頭的 element 還是有特殊意義喔!)
3. HTML 有蠻多預先定義好的字符名稱像是`&nbsp;`(空格)，但 XML 只有 5 個預先定義好的字符名稱(`&lt;`、`&gt;`、`&amp;`、`&quot;`、`&apos;`)

下面是 XML 的範例 (真的跟HTML很像，但有很多自定義的 element 名稱)

<part number="1976">
  <name>Windscreen Wiper</name>
  <description>The Windscreen wiper
    automatically removes rain
    from your windscreen, if it
    should happen to splash there.
    It has a rubber <ref part="1977">blade</ref>
    which can be ordered separately
    if you need to replace it.
  </description>
</part>

(原始碼來源 : https://www.w3.org/standards/xml/core)

最後是 XML 的優點，主要有以下這些 :

* 格式嚴謹
* XML 的 element 都需要被關閉，像是有`<description>`就必須有`</description>`，雖然這樣有點冗餘，但是電腦可以輕鬆抓出巢狀結構的錯誤
* 可讀性佳
* XML 是以純文字為基礎的標記式語言，每個 element、attribute 的名稱都可以採用非常直觀的文字，所以每個人都能輕鬆理解其含義
* 不綁定系統環境
* 除了 SVG 圖形採用 XML 格式之外，其他還有 Android App 設計時的版本資訊、應用權限等等，也都可以採用 XML 格式 (當然還有其他例子~)

## SVG 與 Canvas 的差異

如果要用 SVG 和 Canvas 各自繪製一個圓 :


* SVG

    <svg id="svgelem" height="200">
        <circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
    </svg>

* Canvas

    <canvas id="newCanvas" width="200" height="200"></canvas>

    <script>
        var c = document.getElementById('newCanvas');
        var ctx = c.getContext('2d');
        ctx.beginPath();
        ctx.arc(60, 60, 50, 0, 2 * Math.PI);
        ctx.fillStyle = "green";
        ctx.fill();
    </script>

| SVG | Canvas |
| -------- | -------- |
| 向量圖 | 點陣圖 (pixel)|
|圖形縮放均表現佳|圖形不適合放大 (失真)|
|可透過 script、CSS 編輯| 僅能透過 script 編輯|
|使用 XML 格式繪圖|使用 JavaScript 繪圖|
|支援事件處理器|不支援事件處理器|
|不適合繪製密集圖形|適合繪製密集圖形|
|初登場 : 2001年|初登場: 2004年 (Apple Inc.)|

> ps. 可以對整個 Canvas 畫布註冊事件處理器，但個別的 element 不行

### 參考資料

[W3Schools SVG Tutorial](https://www.w3schools.com/graphics/svg_intro.asp#:~:text=mode%0A%20Dark%20code-,SVG%20Tutorial,-%E2%9D%AE%20Previous)
[XML ESSENTIALS](https://www.w3.org/standards/xml/core)
[WIKIPEDIA Canvas element](https://en.wikipedia.org/wiki/Canvas_element)
[Difference between SVG and HTML 5 Canvas](https://www.geeksforgeeks.org/difference-between-svg-and-html-5-canvas/)
[HTML5（十）——Canvas 与 SVG 区别](https://cloud.tencent.com/developer/article/1884491)
[SVG 與 HTML5 的 canvas 各有什麼優點，哪個更有前途？](https://www.getit01.com/p20171231119690014/)