SVG オプティマイザー
SVG ファイルを最適化してファイルサイズを削減
- ファイルは端末の外に出ません
- ブラウザ内で処理
- 無料・登録不要・透かしなし
ここに SVG ファイルをドロップ、またはクリックして選択
対応形式：SVG、SVGZ · Ctrl+V / ⌘V で貼り付けることもできます
ヒント：ページ上のどこでも Ctrl+V / ⌘V で SVG コードを貼り付けられます。
SVG オプティマイザーの使い方
SVGO で SVG ファイルをブラウザ内で軽量化します。標準・安全・最大のプリセットか個別のプラグインを選び、元とのピクセル差分を確かめてから、SVG・Data URI・React コンポーネントとして書き出せます。
- 1
SVG または SVGZ ファイルをページにドロップするか、SVG コードを貼り付けます。「サンプル」で例を読み込めます。
- 2
「最適化」でプリセットを「標準」「安全」「最大」から選び、「数値の精度」「マルチパス」「整形して出力」を調整します。
- 3
必要に応じて「プラグイン」のグループを開き、SVGO のプラグインを個別にオン・オフします。「リセット」で標準に戻ります。
- 4
「並べて表示」「スライダー」「差分」で結果を比べます。「差分」では変化したピクセルが赤で示されます。
- 5
SVG・Data URI・React のタブを選び、「SVG をダウンロード」か「.jsx をダウンロード」をクリックします。複数ファイルは「すべてダウンロード（ZIP）」で保存できます。
よくある質問
SVG はアップロードされますか？
いいえ。SVGO はブラウザのバックグラウンドで動作し、ファイルが端末の外に出ることはありません。
最適化で SVG の見た目は変わりますか？
「標準」は見た目を変えないことを目指しています。「差分」では両方を描画して違うピクセルの割合を示し、同じなら「見た目は同一です」と表示します。「数値の精度」を下げすぎると細部が崩れることがあります。
アニメーションやスクリプトを含む SVG にはどのプリセットが合いますか？
「安全」です。構造・ID・図形に手を加えないので、CSS セレクターやスクリプトが要素を見失いません。
「最大」で width と height が消えたのはなぜですか？
「最大」はタイトル、サイズ指定、スクリプトも削除します。CSS や img で使うアイコン向けで、SVG はコンテナに合わせて伸縮します。サイズを残したいときは「Web への埋め込み」の removeDimensions をオフにしてください。
Data URI は Base64 と URL エンコードのどちらがよいですか？
たいていは「Base64」をオフのままにしてください。URL エンコード形式のほうが短く、gzip も効きやすくなります。Base64 が求められる場合だけオンにします。
React の書き出しはどうなっていますか？
React タブでは、最適化した SVG をファイル名に基づく JSX コンポーネントに包み、属性を JSX 向けに書き換え、props を svg 要素に渡します。「.jsx をダウンロード」で保存できます。