SVG をブラウザ内で最適化し、最適化済みファイル・データ URI ・ CSS 背景として書き出せる無料ツールです。エンジンは定番の SVGO で、アップロードは一切ありません。アイコンをドロップまたは貼り付け、設定を調整し、 CSS ・ HTML ・デザインシステムに使える最小のインライン形式をそのままコピーできます。
仕組み
本ツールは、 SVG 最適化の定番であり SVGOMG のエンジンでもある SVGO を公開 CDN から一度だけ読み込み、あとはすべて端末内で実行します。エディタのメタデータ・コメント・冗長なデータを削除し、座標を指定した精度に丸めます。最適化後のコードは、ライブプレビューと最適化前後のサイズ比較とともに、4つのすぐ使える形式で表示されます。
手順
.svgファイルをアップロード領域にドロップするか、 SVG コードをソース欄に貼り付けます。- 最適化トグルを調整します。ファイルを小さくしたいなら 精度（ Precision ） を下げ、そのままなら安全な既定値で OK です。
- プレビューとサイズ削減率がその場で更新されるのを確認します。
- 必要な形式（ SVG ・データ URI ・ CSS ）をコピーするか、最適化済みの
.svgをダウンロードします。
出力形式 — どれをコピーするか
| 出力 | 向いている用途 | 補足 |
|---|---|---|
| 最適化 SVG | リポジトリへのコミット、アイコンシステム、<img src> | 最もクリーンなソース。 DL ・コピー可 |
| データ URI （ URL エンコード） | CSS の background-image、インライン HTML | SVG では最小のデータ URI （ Base64比 約20〜30%小） |
| データ URI （ Base64） | 互換性を最優先、古いツール | 大きめだがエスケープ不要で確実 |
| CSS スニペット | スタイルシートに直接貼る | URL エンコードのデータ URI を background-image で包んだ形 |
URL エンコードと Base64の使い分け
SVG はテキストで、 Base64はテキストを約1.3倍に膨らませます。 SVG に関しては URL エンコード のデータ URI の方が小さく、 CSS ・ HTML でも同じく有効なので、 CSS 背景には既定でこちらを選びます。Base64 は、ビルドツールやプラットフォームが URL エンコードの予約文字を壊してしまう場合にのみ使えば十分です。
最適化設定
| 設定 | 既定 | 内容 |
|---|---|---|
| 精度（ Precision ） | 3 | 座標・数値の精度（0〜8）。最も効くサイズ調整。下げすぎると曲線が崩れる |
| マルチパス | オン | 出力が縮まなくなるまでパスを繰り返す |
| コメント / メタデータ削除 | オン | <!-- --> や <metadata>・エディタ由来のデータを削除 |
| ID を整理 | オン | id を短縮し、未使用の id を削除 |
| viewBox を削除 | オフ | 削除するとレスポンシブ拡縮が壊れる。 SVGO 最大の落とし穴 |
| width/height を削除 | オフ | CSS 側で viewBox を使ってサイズ指定できる |
<title> / <desc> を削除 | オフ | アクセシビリティのため既定で保持 |
| 属性を並べ替え | オフ | 属性順を統一し、 gzip 効率と差分を改善 |
例
デザインツールから書き出した 2.1 KB のアイコン（エディタのメタデータ・コメント・小数6桁の座標を含む）は、既定設定で 1 KB を大きく下回り、そのまま追加通信なしで CSS ルールに貼れる data:image/svg+xml,... のインライン文字列になります。
設計上、プライベート
SVG がブラウザの外に出ることはありません。 CDN から取得するのは SVGO のコードだけ（一度きり・以降はキャッシュ）で、貼り付け・ドロップしたコードはローカルで最適化されます。社内アイコンや未公開のブランド素材にも安全に使えます。