SVG最適化ツール

Illustrator、Inkscape、Figma、Sketchから書き出したSVGファイルには、ブラウザが使わない情報がたくさん含まれています。エディタの設定、メタデータ、コメント、長い小数、非表示のレイヤー、空のグループなどです。この最適化ツールはそれらを削除し、座標を選んだ精度に丸めます。たとえば、エディタ情報と小数6桁の座標を持つInkscape風の図は、見た目を変えずに2.5 KBから1.0 KB（59%）に縮小します。整理済みのファイル、HTMLに貼り付けるコード、プレビュー、最適化の前後のサイズが得られます。慎重な整理ツールであり、SVGOのフルパイプラインではなく、すべてブラウザ内で動作します。

使い方

1. SVGファイルを1つ以上選ぶか、SVGコードを貼り付けます。
2. 座標の小数点以下の桁数を設定します（ほとんどのアイコンには2が適しています）。
3. 整理オプションはオンのままにします。スクリプトやスタイルシートがIDを使っている場合は「IDを削除」をオフにしてください。
4. プレビューを元の画像と比較します。
5. 最適化したファイルをダウンロードするか、コードをコピーします。

計算式

削減率 % = (1 − 最適化後のバイト数 ÷ 元のバイト数) × 100

数値は選んだ小数桁数に丸められます（transformはさらに2桁多く保持）。パスデータでは、すべての相対コマンドについて、すでに丸めた現在位置から本来の終点までを測り直すため、長いパスに沿って丸め誤差が積み重なりません。既定値は継承されるプロパティなので、どの親要素にも同じプロパティが設定されていない場合にのみ削除し、<symbol>や<use>がコピーする内容（<use>要素から継承する）の中では削除しません。ファイルに<style>シートがある場合は、既定値と単純なグループを残します。何かから参照されているID（url(#…)、href、aria-labelledby、CSS、スクリプト）と<symbol>要素のIDは残すため、アイコンスプライトも引き続き機能します。

計算例

パスM 10.00001 10 L 20.12345 20.98765 l 5.55555 5.55555 z、fill="#FFFFFF"、Inkscapeのレイヤーラッパーを持つ書き出し済みアイコンは、M10 10 20.12 20.99l5.56 5.55zとfill="#fff"になり、ラッパー、メタデータ、エディタ属性は消えます。この例の686バイトのファイル全体は215バイト、68.7%削減になり、表示は変わりません。