這一系列持續發表SVG 的相關技術
關於 SVG
目前的前端技術中，SVG 與 Canvas 是兩個用來描繪圖形最主要的功能。SVG 是 Scalable Vector Graphics 的縮寫，中文是可縮放向量圖形。
想要用SVG描繪圖形，必須先配置 svg 標籤，並且於其中配置所要描繪的圖形標籤，例如要描繪圓形，只需於其中配置 circ 子標籤，並設定其相關屬性即可，如下式：
<svg>
<circle cx="100" cy="100" r="30" stroke="red" stroke-width="4" fill="yellow"> </circle>
</svg>
每一個 circle 標籤會呈現一個圓形，其中的 cx,cy為圓點坐標， r 為半徑，stroke 為框線顏色，stroke-width 則是框線粗細，以下為此段 circle 標籤設定呈現的結果。
SVG 與 Canvas 同樣都能用來描繪圖形，不過SVG以標籤的形式進行圖形的配置，Canvas 則必須透過 JavaScript 進行運算，SVG 本身的描繪結果是向量圖，不會有失真的問題，當螢幕尺寸改變時都能維持一致的圖像品質，Canvas 一旦描繪完成解析就固定了，如果將內容放大便會失真，這是兩種繪圖技術的主要差異。以下為放大上述圓形的畫面，其中的線條依然保持圓滑。
SVG 本身還能結合 CSS 與 JavaScript ，實作動態效果，並且由於其為標籤的特性，可以相當輕易的整合進 DOM 文件當中。