什麼是 SVG ？
可縮放向量圖形（Scalable Vector Graphics）是一種基於 XML 標準，用於描述二維向量圖形的格式。由於自由縮放而不失真的特性，使得 SVG 特別適合用於 Responsive Web Design。
SVG 的優點
- 縮放性：不同於 PNG、JPEG 這些點陣圖像，SVG 可以無損地進行放大或縮小。因為它並非使用像素，而是透過數學式的計算來描述圖像內容，因此向量圖形格式不會有圖像解析度的問題存在。
- 容易修改：SVG 是文字描述的圖檔，可讀性增加，因此易於修改和編輯（理論上如此，和實際使用的 SVG 編輯器有關）。
- 互動性：SVG 檔案可以嵌入 JavaScript 或 CSS，以實現動畫效果、事件處理等。
- 圖形元素多樣：SVG 支持矩形、圓形、橢圓、路徑等，運用這些元素可以組合出複雜的圖形。
- 濾鏡效果：SVG 也支持模糊、陰影、色彩轉換等濾鏡，可以在不改變圖像內容的前提下實現類似文字陰影的效果。
- 可做動畫：SVG 也能製作動畫，可以透過 CSS 或 SMIL 來實現，這些動畫描述語法非常高效，因此所需的額外數據量很少。以相同的動畫效果來說，SVG 動畫的文件大小會比逐幀儲存的 GIF 動畫來得小，但僅限於圖形簡單的動畫。
⚠️ 注意事項
不同於點陣圖，向量圖的圖像內容是透過數學式計算出來的。所以 SVG 不適合用於細節繁瑣的圖像，否則其運算的速度會變得很慢，檔案的大小也會非常龐大。因此，如果需要呈現畫面複雜的圖片，建議還是使用 PNG、JPEG 等格式就好。
繪製 SVG
編寫 SVG 需要注意的幾項規則：
- 從根元素
<svg> 開始，並以 width 與 height 屬性定義圖像的尺寸
- 由於 SVG 是基於 XML，所以請保留定義 SVG 區段的命名空間，也就是
xmlns="<http://www.w3.org/2000/svg>"
SVG 標籤
SVG 有以下基礎圖形供開發人員使用：