在 SVG 繪製的任何一個時間點，我們都可以透過內嵌 <svg> 或者使用像是 <symbol> 這類的元素來建立新的 viewport 和用戶座標。本篇文章我們將要探討該怎麼作？以及如何利用這種方式協助我們控制 SVG 元素使其更具彈性。

SVG 的元素可以執行縮放、移動、傾斜、旋轉等形變效果就像 HTML 元素可以用 CSS transform 一樣。然而當變形的任務牽扯到座標時，勢必也會影響結果。在這篇文章我們要討論的是 SVG 的 transform 屬性與 CSS 屬性，內容涵蓋如何操作 SVG 變形以及座標系轉換過程您應該知道的事。

SVG 元素並不像其他 HTML 元素受到 CSS 盒模型的管轄。乍看之下元素的定位、變形、移動、旋轉等形變的行為並不是那麼直覺好控制。然而只要我們理解關於 SVG 的座標系與圖案變形(transformation)是如何運作，控制 SVG 就會變得非常容易。