使い方
- SVG ファイルを選ぶかドロップします。複数選択もできます。下の入力欄に SVG コードを貼り付け、「サンプルを読み込む」をクリックすることもできます。
- 小数点以下の桁数などのオプションを調整します。結果はすぐ更新され、各ファイルの縮小率が表示されます。
- 最適化後のファイルを個別にダウンロードするか、「すべてダウンロード(ZIP)」をクリックします。貼り付けたコードは直接コピーできます。
オプションの説明
- 小数点以下の桁数
- 座標や数値を何桁残すかです。アイコンなら 1〜2 桁でも見た目が変わらないことが多く、細かいイラストや地図には 3 桁以上を残してください。
- 複数回処理
- ファイルが小さくならなくなるまで最適化を繰り返します。数パーセント追加で小さくなることがありますが、少し時間がかかります。
- width / height を削除
- viewBox だけを残すため、CSS でサイズを決めるときに SVG をコンテナに合わせて拡大縮小できます。
- ID を残す
- 既定では使われていない ID を削除し、残りを短くします。外部 CSS、JavaScript、別ファイルが要素の ID を参照する場合は選んでください。
例
Inkscape から書き出した元のファイル(789 バイト)には、XML 宣言、コメント、メタデータ、エディター専用属性、長い小数が含まれています。最適化後は 248 バイトです。
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" style="fill:#0f766e;fill-opacity:1;stroke:none"/><path d="m40 62 14 14 28-30-6-6-22 24-8-8Z" style="fill:#fff;stroke:none"/></svg>
よくある質問
画像が劣化しますか?
SVG はベクター形式です。描画に影響しない内容を削除し、選択した桁数に数値を丸めるだけです。既定値では見た目の違いはありません。形が崩れる場合は桁数を増やしてください。
どのくらい小さくなりますか?
書き出したソフトによります。デザインツールの SVG は 30〜70% 小さくなることがあり、サンプルは 789 バイトから 248 バイトになります。すでに最適化されたファイルはあまり変わりません。
アニメーションやスクリプトが動かなくなったのはなぜですか?
SVG のスタイルやスクリプトが ID で要素を選んでいる場合は、「ID を残す」を選んでください。
ファイルはアップロードされますか?
いいえ。SVGO はブラウザ内で動作し、ファイルは端末内で読み取り・処理されます。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。