SVG をブラウザ内で最適化し、最適化済みファイル・データ URI ・ CSS 背景として書き出せる無料ツールです。エンジンは定番の SVGO で、アップロードは一切ありません。アイコンをドロップまたは貼り付け、設定を調整し、 CSS ・ HTML ・デザインシステムに使える最小のインライン形式をそのままコピーできます。
仕組み
本ツールは、 SVG 最適化の定番であり SVGOMG のエンジンでもある SVGO を公開 CDN から一度だけ読み込み、あとはすべて端末内で実行します。エディタのメタデータ・コメント・冗長なデータを削除し、座標を指定した精度に丸めます。最適化後のコードは、ライブプレビューと最適化前後のサイズ比較とともに、4つのすぐ使える形式で表示されます。
手順
.svgファイルをアップロード領域にドロップするか、 SVG コードをソース欄に貼り付けます。- 最適化トグルを調整します。ファイルを小さくしたいなら 精度( Precision ) を下げ、そのままなら安全な既定値で OK です。
- プレビューとサイズ削減率がその場で更新されるのを確認します。
- 必要な形式( SVG ・データ URI ・ CSS )をコピーするか、最適化済みの
.svgをダウンロードします。
出力形式 — どれをコピーするか
URL エンコードと Base64の使い分け
SVG はテキストで、 Base64はテキストを約1.3倍に膨らませます。 SVG に関しては URL エンコード のデータ URI の方が小さく、 CSS ・ HTML でも同じく有効なので、 CSS 背景には既定でこちらを選びます。Base64 は、ビルドツールやプラットフォームが URL エンコードの予約文字を壊してしまう場合にのみ使えば十分です。
最適化設定
例
デザインツールから書き出した 2.1 KB のアイコン(エディタのメタデータ・コメント・小数6桁の座標を含む)は、既定設定で 1 KB を大きく下回り、そのまま追加通信なしで CSS ルールに貼れる data:image/svg+xml,... のインライン文字列になります。
設計上、プライベート
SVG がブラウザの外に出ることはありません。 CDN から取得するのは SVGO のコードだけ(一度きり・以降はキャッシュ)で、貼り付け・ドロップしたコードはローカルで最適化されます。社内アイコンや未公開のブランド素材にも安全に使えます。


