SVG最適化・整理（容量を減らす）

InkscapeやIllustratorから書き出したSVGには、エディターのデータ、コメント、桁の多い小数座標が含まれ、図に比べてファイルが大きくなります。コードを貼り付けるかファイルを置くと、そうした余分を取り除き、減った容量と前後の図を並べて確認できます。

使い方

1. 「SVGコード」にコードを貼り付けるか、その下の枠に .svg ファイルを置きます。
2. 「オプション」で削除する項目を選びます。初期設定では図は変わりません。「title・descを削除」と「参照されていないidを削除」は必要なときだけオンにします。
3. 「小数点以下の桁数」を減らすと座標が短くなります。アイコンなら1〜2桁で十分です。
4. 「整理前のプレビュー」と「整理後のプレビュー」が同じことを確認してから「コピー」または「SVGを保存」を押します。複数ファイルは「すべてZIPで保存」でまとめて保存できます。

計算方法と補足

• スクリプト、onで始まるイベント属性、foreignObject、httpアドレスや他のファイルへの参照は常に削除され、件数が結果の上に表示されます。
• エディターデータとは inkscape: や sodipodi: などの接頭辞が付いた属性・要素と、使われていない名前空間宣言です。既定値の削除は fill-opacity="1" のように、なくても同じ図になる属性だけを対象にします。
• 数値の整理は path、viewBox、points、transform、座標の値を指定した桁数に丸めます。座標の変換や図形の結合は行いません。すべてブラウザ内で処理され、ファイルはどこにも送信されません。

よくある質問

SVGはなぜ見た目の図より大きいのですか？

エディターがズーム倍率、レイヤー名、メタデータ、小数6〜8桁の座標を保存するためです。簡単なアイコンではそれがファイルの半分以上を占めることが多く、整理すると通常40〜70%減ります。

整理後に図が変わることはありますか？

初期設定では描画に影響しない項目だけを削除します。小数を0〜1桁に丸めると、非常に小さな図では線がずれることがあるので、2つのプレビューを比べてください。

titleとdescはなぜ初期設定で残るのですか？

スクリーンリーダーが画像を説明するときに読み上げるためです。装飾目的のSVGなら「title・descを削除」をオンにできます。

SVGOと同じ結果になりますか？

いいえ。メタデータの削除や丸めなど安全な整理だけを行い、パスの結合はしません。その代わりインストール不要で、結果を目で確認できます。