使い方

「サンプルSVGを読み込む」をクリックしてデザインツールから書き出されたコードの整理プロセスを確認するか、ご自身の.svgファイルをドラッグ＆ドロップします。
FigmaやIllustrator、エディタなどからコピーした生の<svg>コードを直接テキストボックスに貼り付けることもできます。
安全なデフォルト設定である「標準」を選択します。さらにファイルサイズを削減したい場合は「強力（アグレッシブ）」モードへ切り替えてください。
「元のサイズ」「最適化後」「削減率」を確認し、プレビューで見た目に問題がないかチェックします。
HTML、Reactなどのコンポーネントに埋め込む場合は「SVGコードをコピー」をクリックし、ファイルとして保存する場合は「SVGをダウンロード」をクリックします。

主な機能

SVGOによるSVG圧縮：ブラウザ上でSVGOを実行し、ベクターコードからメタデータ、空のグループ、不要な属性を削除してスリム化します。
FigmaやIllustratorの出力コードを整理：デザインツール特有の冗長なSVGを、Webページへの組み込みに最適なクリーンなアイコンコードに整理します。
即時のファイルサイズ比較：元のサイズ、最適化後のサイズ、削減率をその場で表示し、ファイル差し替えの効果を確認できます。
コードコピーまたはファイルダウンロード：最適化された<svg>コードを1クリックでコピーでき、HTMLやReactなどのコンポーネントに貼り付けられます。そのまま.svgファイルとしてダウンロードも可能です。
デザイン資産を守るローカル処理：ファイルの読み込み、SVGO最適化、プレビュー、書き出しはすべてブラウザ上で実行され、外部サーバーにアップロードされることはありません。

計算ロジック

SVGの最適化は、画像をラスタライズ（ビットマップ画像に変換）するのではなく、XMLベースのベクターマークアップ自体をクリーンアップします。本ツールはブラウザ上で直接SVGOを実行し、エディタ用のメタデータの削除、不要なグループの結合、空の属性の削除、パスデータの圧縮、座標数値の丸めなどを行います。

「標準」モードは、ほとんどのアイコンやイラストに対して安全な推奨設定です。「強力（アグレッシブ）」モードでは、複数回の最適化パスと数値精度の短縮が適用されるため、さらにサイズを削減できますが、極めて複雑なパスではごくわずかに形状が変化する場合があります。

よくある質問

SVGのファイルサイズを削減するにはどうすればいいですか？

デザインツールが書き出した不要なメタデータ、空のグループ、冗長な属性、および圧縮可能なパスデータを削除するのが最も効果的です。本ツールは、これらのSVGO最適化処理をブラウザ上で実行し、削減率を表示します。

Figmaから書き出したSVGコードをきれいにするには？

書き出した.svgファイルをツールにドラッグ＆ドロップするか、生の<svg>コードを直接貼り付けます。「標準」モードから試し、プレビューで表示を確認した上でコピーまたはダウンロードしてください。

SVGを圧縮すると画質は劣化しますか？

通常は劣化しません。SVGはベクターコードであり、SVGOは主に見えないメタデータや冗長なコード構造を整理します。ただし、「強力（アグレッシブ）」モードでは極めて複雑なパスで微細な形状の変化が起こる可能性があるため、本番環境に適用する前にプレビューで確認することをお勧めします。

アップロードした画像はサーバーに保存されますか？

いいえ、保存されません。ファイルの読み込み、SVGO最適化、プレビュー、コピー、およびダウンロード処理はすべてブラウザ上でローカルに行われます。

最適化されたSVGを直接HTMLに貼り付けて使えますか？

はい、「SVGコードをコピー」を使うと、完全な<svg>マークアップコードがコピーされるため、HTMLやReactコンポーネント、アイコンシステムにそのままインラインで貼り付けることができます。

PNGやJPGをSVGに変換することはできますか？

いいえ、できません。本ツールは既存のSVGベクターコードを最適化するためのものであり、ビットマップ画像をベクターデータに変換する機能はありません。

SVG最適化・圧縮ツール - SVGOでWeb向けにコードを軽量化

プレビュー

最適化結果

使い方