## **SVG**
<style>
.red {
color: red;
}
</style>
#### 定義：可縮放向量圖形(Scalable Vector Graphics)，基於可延伸標記式語言(XML)，<span class="red">二維向量圖片檔案</span>。較於點陣圖片，SVG 可隨著使用者裝置<span class="red">縮放</span>，確保圖片不會變形失真。


SVG 提供的元素可以定義：
1. 圓形
2. 形狀
3. 簡單或複雜的曲線
4. 其他形狀

一個簡單的 SVG 文檔包含 **svg** 根元素，以及基本的形狀元素。另外，**g** 元素用於把幾個基本形狀標記組成一個群。
:::danger
注意事項：
1. SVG 為 XML 所規範的程式格式，其格式與 XML 1.0 以及 XML 語法相容，但當我們在 HTML 內是使用 SVG 時，可能會造成與 XML 不相容。
2. SVG 內使用 **CSS** 語法撰寫樣式。
3. SVG 圖層渲染為 **由後往前**，最下層(後方)圖層會覆蓋住上層(前面)圖層。
:::
- 範例

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="lightpink" />

  <circle cx="150" cy="100" r="80" fill="lightblue" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

> SVG 元素與屬性都是依 XML 語法撰寫，其格式嚴格規定了==大小寫區分==(與HTML相反)。
> SVG 中的屬性值必須使用==雙引號「""」==，即便該值是數字。

上面範例中，在 SVG 內包含了：

- 基礎 svg 聲明檔，定義整個 SVG 檔內的版本、寬高、XML規範...等。
- rect 矩形，以及矩形的樣式設定。
- circle 圓形，以及圓形的樣式設定。
- text 字體，以及字體的樣式設定。

## 參考資料
* [ 第十三章、辣個 SVG 也許會遲到，但永不缺席 。(起)](https://ithelp.ithome.com.tw/articles/10246214)
* [SVG 引言](https://developer.mozilla.org/zh-TW/docs/Web/SVG/Tutorial/Getting_Started)