SVGミニファイアーはSVGOエンジンを使ってSVGファイルからエディタのメタデータ・コメント・冗長な属性を削除し、通常30〜70%のサイズ削減を実現しながら見た目は変えません。IllustratorやFigma、InkscapeなどのデザインツールからエクスポートしたファイルをWebプロジェクトにデプロイする前の最適化に最適です。
サイズが小さくなる理由
デザインソフトのエクスポートファイルにはブラウザが使用しないデータが大量に含まれています。レイヤー名、未使用のスタイル定義、エディタ固有のXML名前空間、23.456789のような小数点以下6桁以上の座標値などです。これらを削除しても描画結果は変わりません。削減量はツールによって異なります。Illustratorのエクスポートは名前空間宣言で膨らみやすく、Figmaのエクスポートは比較的コンパクトです。
マルチパス処理
マルチパスを有効にするとSVGOがファイルサイズが縮まらなくなるまで最適化サイクルを繰り返します。<g>グループが深くネストされたファイルでは、シングルパスよりさらに3〜10%削減できることが多いです。シンプルでフラットなアイコンでは差はほぼありません。処理はブラウザ内で実行され、マルチパスを有効にしても1秒以内に完了します。
整形と最小化は目的が逆
「コードを整形」は出力をインデント付きの読みやすいXMLに再フォーマットします。後でSVGを手動で編集する場合に便利です。プロダクション向けに最小サイズを目指す場合は有効にしないでください。最小化で削除したスペースを整形で戻すことになり、目的が相反します。
SVGが壊れる可能性があるオプション
デフォルトのオプションは標準的なアイコンには安全です。以下のオプションは注意が必要です。
- IDをクリーン — 参照されていないIDをリネームまたは削除します。外部のCSSやJavaScriptがIDセレクタでSVG要素を操作してアニメーションを制御している場合は、このオプションをオフにしてください。
- scriptタグを削除 / styleタグを削除 — SVGに
<script>や<style>で動くアニメーションやインタラクションが含まれている場合、有効にするとアニメーションが完全に失われます。 - viewBoxを削除 —
viewBoxがないとSVGをレスポンシブに拡大縮小できなくなります。固定のwidthとheight属性があり、スケーリングが不要な場合のみ安全です。
すべての処理はブラウザ内でローカルに実行されます。ファイルはサーバーに送信されません。