SVG CONVERTER
履歴SVG→コード
← Back to Blog

SVG transformの完全ガイド：基礎から実践まで、座標変換をマスターしよう

SVGのtransform属性を使いこなして、図形の移動・回転・拡大縮小・傾斜を自在に制御する方法を解説。初心者向けの基礎から実践的な応用テクニックまで、コード例を交えて詳しく説明します。

2 min read

SVG（Scalable Vector Graphics）において、transform属性は図形の位置、サイズ、向きを変更する強力なツールです。本記事では、SVG transformの基礎概念から実践的な応用まで、詳細なコード例とともに解説します。

SVG transformの基礎概念

SVG transformは、図形に対して以下の変換操作を提供します：

  • 移動（translate）: 図形の位置を変更
  • 回転（rotate）: 図形を指定した角度で回転
  • 拡大縮小（scale）: 図形のサイズを変更
  • 傾斜（skew）: 図形を指定した角度で傾ける

transformの基本構文

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" fill="blue" />
  <rect x="10" y="10" width="50" height="50" fill="red" 
        transform="translate(30, 20)" />
</svg>

主要なtransform関数の詳細解説

移動（translate）

図形をX軸、Y軸方向に移動します。

<svg width="200" height="200">
  <!-- 元の図形 -->
  <circle cx="50" cy="50" r="20" fill="blue" />
  
  <!-- X方向に30、Y方向に20移動 -->
  <circle cx="50" cy="50" r="20" fill="red" 
          transform="translate(30, 20)" />
</svg>

回転（rotate）

指定した角度で図形を回転します。回転の中心点を指定することも可能です。

<svg width="200" height="200">
  <!-- 元の図形 -->
  <rect x="40" y="40" width="40" height="20" fill="blue" />
  
  <!-- 45度回転（中心点指定なし） -->
  <rect x="40" y="40" width="40" height="20" fill="red" 
        transform="rotate(45)" />
  
  <!-- 中心点(50,50)を基準に30度回転 -->
  <rect x="40" y="40" width="40" height="20" fill="green" 
        transform="rotate(30, 50, 50)" />
</svg>

拡大縮小（scale）

図形のサイズを拡大または縮小します。

<svg width="200" height="200">
  <!-- 元の図形 -->
  <rect x="20" y="20" width="30" height="30" fill="blue" />
  
  <!-- X方向に1.5倍、Y方向に2倍に拡大 -->
  <rect x="20" y="20" width="30" height="30" fill="red" 
        transform="scale(1.5, 2)" />
</svg>

傾斜（skew）

図形をX軸またはY軸方向に傾斜させます。

<svg width="200" height="200">
  <!-- 元の図形 -->
  <rect x="20" y="20" width="40" height="40" fill="blue" />
  
  <!-- X軸方向に30度傾斜 -->
  <rect x="20" y="20" width="40" height="40" fill="red" 
        transform="skewX(30)" />
  
  <!-- Y軸方向に15度傾斜 -->
  <rect x="80" y="20" width="40" height="40" fill="green" 
        transform="skewY(15)" />
</svg>

複合transformの活用

複数の変換を組み合わせることで、より複雑な効果を実現できます。

<svg width="300" height="200">
  <!-- 移動＋回転＋拡大の複合変換 -->
  <rect x="0" y="0" width="40" height="20" fill="blue" 
        transform="translate(50, 30) rotate(45) scale(1.2)" />
</svg>

変換は右から左の順に適用されることに注意してください。上記の例では、まず拡大、次に回転、最後に移動が適用されます。

実践的な応用例

アニメーションとの連携

SVG transformはCSSアニメーションやSMILと組み合わせて使用できます。

<svg width="200" height="200">
  <rect x="20" y="20" width="40" height="40" fill="blue">
    <animateTransform attributeName="transform"
                      type="rotate"
                      from="0 40 40" to="360 40 40"
                      dur="3s"
                      repeatCount="indefinite" />
  </rect>
</svg>

レスポンシブデザインでの活用

<svg viewBox="0 0 100 100" width="100%" height="auto">
  <g transform="scale(0.5) translate(25, 25)">
    <circle cx="50" cy="50" r="40" fill="lightblue" />
    <rect x="30" y="30" width="40" height="40" fill="red" 
          transform="rotate(45 50 50)" />
  </g>
</svg>

よくある間違いと解決策

間違い1: 変換順序の誤解

<!-- 誤った順序 -->
<rect transform="translate(50, 50) rotate(45)" />

<!-- 正しい順序（意図に応じて） -->
<rect transform="rotate(45) translate(50, 50)" />

間違い2: 単位の混在

<!-- 誤り：単位の混在 -->
<rect transform="translate(50px, 20)" />

<!-- 正解：単位なしで記述 -->
<rect transform="translate(50, 20)" />

SVG transformでは座標値に単位（px, emなど）を付けないことが重要です。詳細はMDN Web DocsのSVG transform解説を参照してください。

パフォーマンス最適化のヒント

  1. ハードウェアアクセラレーションの活用: 複雑なtransformはCSSのtransformプロパティを使用
  2. 変換の最小化: 必要な変換のみを適用
  3. グループ化の活用: 関連する要素を<g>タグでグループ化

W3C SVG Transform仕様では、より詳細な技術情報を確認できます。

よくある質問（FAQ）

Q: transform属性とCSS transformプロパティの違いは何ですか？ A: SVGのtransform属性はSVG要素専用で、座標系に直接作用します。CSS transformはより広範な要素に適用でき、ハードウェアアクセラレーションの恩恵を受けやすいですが、SVGの座標系には影響しません。

Q: 複数のtransformを適用する順序は重要ですか？ A: はい、非常に重要です。変換は適用順に実行されるため、順序によって結果が大きく異なります。

Q: transformのパフォーマンスへの影響は？ A: 単純なtransformは軽量ですが、複雑な変換や多数の要素への適用はパフォーマンスに影響する可能性があります。最適化を心がけましょう。

まとめ

SVG transformは、図形の操作において非常に強力な機能です。基礎的な移動、回転、拡大縮小から、複合変換による高度な効果まで、適切に活用することで表現力豊かなグラフィックを作成できます。変換の順序や座標系の理解が重要であり、実践を通じて習熟していきましょう。