コード整形 / MULTIVERTO
編集しやすいように、単純な SVG 要素の階層へ字下げを付けます。
01 / 例
<svg xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20"/></svg><svg xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20"/>
</svg>02 / ガイド
単純な SVG の要素ツリーにインデントを付け、編集時にグループと形状の階層を追いやすくします。たとえばグループの中に別のグループがあると、どの変換がどの図形にかかるか読み取りやすくなります。座標、塗り、変形、パスの形は入力どおりに保ちます。したがって手動編集の助けにはなりますが、図形を単純化したりベクター画像の容量を大幅に減らしたりする操作ではありません。
SVG はベクター画像を XML で記述する形式です。要素は図形、テキスト、塗り、変形、再利用する定義を表し、属性が描画の内容を決めます。整形すると入れ子のグループや形状が見やすくなり、コンパクト化では要素間の配置用空白を減らせます。どちらの操作もパスの座標を計算し直したり、未使用の定義を除いたりしません。見た目を判断するには、結果を実際の表示サイズで描画して確認してください。
整形はコードの確認やデバッグで特に役立ちます。インデントを見ると、入れ子の不足や予期しない同階層の要素を発見しやすくなります。全体像が分かる代表的な断片を貼り付け、一度整形してください。最も外側の構造から内側へ読み、各要素、ブロック、句がどこで始まり終わるか確認します。このページは言語のあらゆる拡張に対応するコンパイラーではありません。この例では「<svg xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20"/></svg>」から、簡潔に表示した結果「<svg xmlns="http://www.w3.org/2000/svg"> ⏎ <circle cx="25" cy="25" r="20"/> ⏎ </svg>」が得られます（⏎は改行を表します）。単語だけでなく句読点も読み、元の一箇所を変えて結果の同じ箇所を比べてください。別々の変換を持つグループに二つの SVG 図形を置き、整形された入れ子から各図形に適用される変換を確認します。元と結果を同じ viewBox とピクセル寸法で描画して比べてください。整形は点検を助けますが、表示領域の外にあるパスまでは検出できません。
短い SVG を展開し、座標を編集する前にグループ、図形、属性を見つけます。編集後は実際の表示サイズでアイコンを描画して比較してください。このツールが変えるのはマークアップの配置であり、パスの幾何形状、viewBox の座標、描画順ではありません。アニメーションや埋め込みスクリプトは別に検証します。元の SVG を残し、名前、属性の引用符、テキスト要素、参照を確認してください。
ガイドを探す