SVG XMLのフォーマット — スケーラブルベクターグラフィックスマークアップの整理

SVGをXMLとしてフォーマット

SVG（Scalable Vector Graphics）ファイルは有効なXMLドキュメントです。圧縮されたパスデータ、インラインスタイル、ツール生成属性のため、読みにくくなることがよくあります。SVG XMLのフォーマットにより、構造が可視化され編集可能になります。

SVGドキュメント構造

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     width="100"
     height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#0000ff" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
  <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
</svg>

パスデータの複雑さ

SVG <path> 要素はコンパクトな描画コマンドを含む d 属性を持ちます。このデータは通常、1つの長い文字列です：

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />

フォーマッターは属性内のパスデータをそのまま保持すべきですが（パスコマンドの再フォーマットは壊す可能性がある）、<path> 要素自体は適切にインデントします。

SVG固有の名前空間

SVGには追加の名前空間が含まれる場合があります：

• xmlns:xlink — ハイパーリンクと参照用（SVG 2では非推奨だが依然として一般的）
• xmlns:svg — 明示的なSVG名前空間プレフィックス
• xmlns:inkscape — Inkscapeエディタのメタデータ
• xmlns:sodipodi — Sodipodiエディタのメタデータ

エディタ固有の名前空間とその属性は、ファイルサイズを削減するために安全に除去できることが多いです。

インラインスタイル vs. 属性

SVGはプレゼンテーション属性とCSSスタイルの両方をサポートします。フォーマットにより、構造属性（viewBox、width）とビジュアル属性（fill、stroke）を区別しやすくなります。

ツール生成SVGのクリーンアップ

Illustrator、Figma、Inkscapeなどのツールはメタデータ、コメント、冗長な属性を追加します。最初にSVGをフォーマットすることで、この冗長部分を手動またはSVGOなどのツールで特定・除去しやすくなります。