コード整形 / 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 の図形やグループの間にある空白だけのノードを減らし、属性値はそのまま残します。文字列が短くなっても、描画した画像の寸法や読み込み速度が必ず変わるわけではありません。text 要素の内容、参照、グループの関係は結果を使う前に確認してください。元データを保存し、アイコンを埋め込むページで見た目とアクセシブル名を比べると、小さな差を見つけやすくなります。
コンパクト化は記述されたパスの幾何形状を保ちます。視覚的な最適化ツールが行う座標の簡略化や不要定義の削除には、描画結果を踏まえた別の判断が必要です。この編集器は単純な整形式の svg ルートを要求し、宣言、コメント、CDATA を拒否します。変換後は複数の大きさで描画して、文字、viewBox、外部参照が保たれているか調べてください。
機械が結果を読み、人向けのインデントが不要なときにコンパクト化が役立ちます。まず元の内容が正しく動作することを確認し、この操作が何を除いたか見てください。本番用の最適化ツールと同じ削減率を約束するものではありません。その種のツールは文法全体を解析し、識別子を書き換え、定数をまとめ、シリアライズ後に圧縮する場合があります。ここでは保守的に処理し、不確かな構文は保持するかエラーにします。このページの実例では「<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>」になります。単語だけでなく句読点も読み、元の一箇所を変えて結果の同じ箇所を比べてください。title と text 要素を含む SVG アイコンを、コンパクト化の前後で比較します。埋め込み先ページで見た目のピクセルだけでなくアクセシブル名も確認してください。XML 文字列が短くなっても、後続の最適化工程で文字の位置、継承したスタイル、定義への参照が保持された証拠にはなりません。
ページへ埋め込む簡単な SVG や、保存形式を比べたいアイコンに使います。変換後の画像をプレビューし、テキストと URL 参照も確認してください。削除するのは対応範囲内の要素間の配置用空白だけで、パスの単純化やラスター寸法の変更はしません。再編集のため元データを残し、viewBox、属性、アクセシブル名、非 ASCII 文字を照合してください。
ガイドを探す