示例
<svg width="30" height="10">
<g fill="red">
<rect x="0" y="0" width="10" height="10" />
<rect x="20" y="0" width="10" height="10" />
</g>
</svg>
所有後續變換都彙總在元素的 transform 屬性中。變換可以透過連線它們（用空格分隔）來鏈式使用。
平移
可能需要移動元素，即使您可以使用相應的屬性進行定位。為此，可以使用 translate() 變換。
<svg width="40" height="50">
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>
該示例將渲染一個矩形，其平移點為 (30,40)，而不是 (0,0)。
如果未給出第二個值，則假定其為 0。
旋轉
旋轉元素是一項相當常見的任務。為此，請使用 rotate() 變換。
<svg width="31" height="31">
<rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>
此示例顯示了一個旋轉 45 度的正方形。rotate() 的值以度為單位。
多個變換
變換可以很容易地透過空格分隔來連線。例如，translate() 和 rotate() 是常用的變換。
<svg width="40" height="50">
<rect
x="0"
y="0"
width="10"
height="10"
transform="translate(30,40) rotate(45)" />
</svg>
此示例再次顯示了上面看到的那個小正方形，這次它也被旋轉了 45 度。
傾斜
為了將我們的矩形變成菱形，可以使用 skewX() 和 skewY() 變換。每個變換都接受一個角度，該角度決定了元素將傾斜多遠。
縮放
scale() 更改元素的大小。它接受兩個數字，第一個是x 縮放因子，第二個是y 縮放因子。這些因子被視為變換後的尺寸與原始尺寸的比率。例如，0.5 縮小 50%。如果省略第二個數字，則假定它等於第一個數字。
使用 matrix() 進行復雜變換
以上所有變換都可以用一個 2x3 的變換矩陣來表示。要組合多個變換，可以使用 matrix(a, b, c, d, e, f) 變換直接設定結果矩陣，該變換透過以下方式將座標從前一個座標系統對映到新座標系統：
請參閱 SVG 變換文件中的具體示例。要了解有關變換的更多資訊，請檢視 CSS 變換指南。
對座標系統的影響
在使用變換時，您會在應用變換的元素內部建立一個新的座標系統。這意味著，您為元素及其子元素指定的單位可能不遵循 1:1 畫素對映，而是根據變換進行扭曲、傾斜、平移和縮放。
<svg width="100" height="100">
<g transform="scale(2)">
<rect width="50" height="50" />
</g>
</svg>
上面示例中生成的矩形將是 100x100px。當您依賴於 userSpaceOnUse 等屬性時，會產生更引人入勝的效果。
在 SVG 中嵌入 SVG
與 HTML 不同，SVG 允許您無縫嵌入其他 svg 元素。這樣，您還可以透過利用內部 svg 元素的 viewBox、width 和 height 來建立新的座標系統。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<svg width="100" height="100" viewBox="0 0 50 50">
<rect width="50" height="50" />
</svg>
</svg>
上面示例的效果與上面的示例基本相同，即矩形的大小將是指定的兩倍。