このツールは「最適化」を押したときだけ、公式のSVGOブラウザエンジンを読み込みます。標準のプラグインプリセットを使い、Webで安全に扱えるようスクリプトとイベントハンドラーを削除します。CSS、JavaScript、グラデーション、マスク、外部参照でIDを使っている場合は、IDを残す設定も選べます。
無料のSVG最適化ツール
すべてブラウザー内で動作します。アップロードも登録も不要です。
SVG最適化とは？
SVG最適化は、編集ソフトのメタデータ、コメント、重複した属性、不要な小数精度を取り除いてベクターファイルを軽くする処理です。マークアップを貼り付けるかファイルを選ぶと、ブラウザ内でSVGOが実行されます。元画像と最適化後のプレビューを見比べ、作品をアップロードせずに小さくなったSVGをコピーまたはダウンロードできます。
使い方
- 1SVGを追加する. 完全なSVGマークアップを貼り付けるか、ローカルの.svgファイルをドロップするか、内蔵サンプルを読み込みます。
- 2安全な設定を選ぶ. 小数精度を決め、さらに削減したい場合はマルチパスを有効のままにします。他のコードから参照されるIDは保持してください。
- 3最適化して比較する. SVGOを実行し、処理前と処理後のバイト数と二つのプレビューを確認します。
- 4コピーまたはダウンロードする. 元の作品はそのまま残し、軽量化されたマークアップをコピーするか、新しい.optimized.svgファイルをダウンロードします。
こんな方に
- サイトやコンポーネントライブラリへ追加する前に、アイコン、ロゴ、イラストを軽くしたいフロントエンド開発者。
- Figma、Illustrator、Sketch、Inkscapeから書き出したファイルのメタデータや編集ソフト固有の記述を整理したいデザイナー。
- ベクター素材をWebバンドルへ入れる前に、UTF-8の正確なバイト削減量を測りたいパフォーマンス担当者。
- React、Vue、Svelte、通常のHTMLで使うインラインSVGをコンパクトに整えたいコンポーネント制作者。
よくある質問
SVG最適化ツールは無料ですか？
はい。アカウント作成、支払い、インストールは不要です。UTF-8の正確なバイト変化を確認し、結果をブラウザから直接コピーまたはダウンロードできます。
SVGはサーバーへアップロードされますか？
いいえ。ファイルの読み込み、SVGO処理、バイト計測、プレビュー生成はすべてブラウザ内で行われます。ロゴ、アイコン、未公開の作品がこのツールからアップロードされることはありません。
最適化できるSVGの最大サイズは？
5 MBまでのSVGソースを処理できます。この上限により、スマートフォンや一般的なノートパソコンでも解析が重くなりすぎません。大きな書き出しファイルは、埋め込みラスター画像を外すか、作品を複数の素材へ分けると扱いやすくなります。
SVG最適化で見た目は変わりますか？
SVGOは表示を保ったまま不要なデータを削るよう設計されています。ただし、小数を大きく丸めたりIDを整理したりすると、複雑なファイルに影響する場合があります。両方のプレビューを比較し、本番で使う埋め込み方法でも確認してから元ファイルを置き換えてください。
小数精度を変えるとどうなりますか？
小数精度は、座標、変形、関連する数値にSVGOが残す小数桁数です。値を下げるほど軽くなりやすい一方、非常に細かい作品や大きな作品では形がずれることがあります。一般的なWebアイコンやイラストには3桁が実用的な初期値です。
SVGのIDは保持すべきですか？
CSS、JavaScript、aria属性、グラデーション、マスク、フィルター、外部文書から参照されるIDは保持してください。外部参照のない装飾画像なら、保持をオフにして未使用の識別子をSVGOに削除または短縮させることもできます。
SVG内のスクリプトは削除されますか？
はい。最適化処理でscript要素、イベントハンドラー属性、JavaScriptリンクを削除します。通常のWeb画像としては安全性が高まりますが、スクリプトによる動作が前提のSVGアプリには向きません。
マルチパス最適化とは？
マルチパスでは、各処理でファイルが小さくなる間、SVGOが出力をもう一度処理します。前の処理で新しい整理箇所が見つかることがあり、削減量が少し増える場合があります。ただし、通常は最初の処理で大半が削減されます。