SVGオプティマイザー
XMLメタデータを削除し、コメントを削除し、空白を圧縮してSVGアートワークをより速く配信します。
ベクターを最適化中...
SVGアイコン、イラスト、またはZIPライブラリをドロップ
クリーンアップを承認するまですべてクライアント側で処理され、プレビューでパスの変更が確認できます
SVGキュー
- SVGファイルを追加して、圧縮前にサイズとステータスをプレビューできます
クリーンアップオプション
ファイルをドロップしてライブプレビューを表示します。
元のアップロードファイルは最適化されたベクターの配信後すぐに削除されます
最適化されたSVGがサイズ削減量とダウンロードボタンと共にここに表示されます
このSVG最適化ツールは、SVGファイルをテキストレベルで軽量化します。XMLコメント、オプションのXML宣言、メタデータブロック全体を削除し、タグ間の空白を圧縮します。見える範囲のマークアップ、属性、パス、レンダリング動作は変わりません。1バッチあたり最大50ファイル、ファイルあたり40MBまで対応します。手作成またはデザインツールでエクスポートされたSVGは通常、視覚的な差がないまま20～60%圧縮されます。
最適化ツールが削除するもの
3つの独立したオプションがあり、どれも有効なSVGに安全に適用できます。
- XMLコメントを削除: すべての
<!-- ... -->ブロックを削除します。コメントはデザインツールのエクスポート（Illustrator、Sketch、Figmaなど）に一般的に含まれます（「Generator: Sketch 96」のようなコメント）が、レンダラーによって完全に無視されます。 - メタデータを削除:
<metadata>...</metadata>ブロック全体（RDF、ライセンス情報、デザインツール追跡データなどを含むことが多い）とファイルの先頭にあるオプションの<?xml ... ?>宣言を削除します。どちらもレンダリング出力に見えず、ファイルあたり100～500バイト追加されることがよくあります。 - 空白を圧縮: タグ間の空白（SVGを人間が読みやすくするためのインデント）を削除し、複数の連続した空白を1つの空白に圧縮します。ほとんどのデザインツールはエディター表示用にインデントされたSVGをエクスポートしますが、レンダラーは気にしません。
最適化ツールが触らないもの
このツールは意図的に控えめに設計されています。実際のSVGコンテンツの周りのテキストラッピングのみを変更し、SVG自体には触りません。具体的には以下の通りです。
- パスデータは変わりません。 パス座標、小数精度、曲線コマンドは、ソースが書いたままの形で保持されます。14桁の小数点座標は14桁のままです。
- 属性はそのまま保持されます。 重複排除、簡略化、色値の短縮、変換の統合は行いません。
- 要素削除は行いません。 見えない要素、未使用のdef、ゼロサイズの図形は保持されます。
- viewBoxまたはサイズの再計算は行いません。
利点は安全性です。出力はすべてのブラウザでソースと同じようにレンダリングされます。トレードオフは、全プラグイン有効なSVGOのような完全な最適化ツールを使って複雑なSVGの最後の1バイトを絞り出すことはできないということです。手作成またはデザインツールエクスポートされたほとんどのSVGでは、コメント、メタデータ、空白削除だけで20～60%の削減が可能で、一般的なケースに対応しています。パス簡略化、小数丸め、色短縮などの深い最適化が必要な場合は、その後にSVGOなどの専用ツールを使用してください。
SVG最適化が重要な場合
- ウェブで配信されるアイコンセット: 一般的なUIは数十のSVGアイコンを使用します。デプロイ前に各アイコンを最適化すると、ページ読み込みごとに複合効果が得られます。
- HTMLに埋め込まれたインラインSVG: SVGをページソースに直接埋め込む場合（外部ファイルとして読み込む代わりに）、ブロート（不要な部分）のすべてがHTMLペイロードに追加され、最初の描画をブロックします。
- ランディングページのSVGイラスト: IllustratorまたはFigmaからエクスポートされたヒーロー画像には、通常30～50%の見えないオーバーヘッドが含まれます。
- ロゴとファビコン: ブランドSVGはサイトのすべてのページで読み込まれます。一度トリミングすると、永続的な削減が得られます。
- モバイルアプリのSVGアセット: アプリバンドルサイズが重要です。クリーンなSVGはより小さいバンドルで配信されます。
ワークフローのメモ
デプロイまたはコミット前の最後のステップとして最適化してください。出力はまだ完全に編集可能なSVG（ツールは見えないコンテンツのみを削除します）ですが、空白が圧縮されているため、人間が読みやすくなくなります。ソースファイルは元のインデント形式で保持して、デザインツールで編集を続けたり、後でマークアップを手動で調整したりできるようにしてください。最適化ツールの削減量では不十分なファイル（多くのパス座標を持つヘビーイラスト）の場合は、公開前にSVGOなどのパス対応最適化ツールで結果を実行することを検討してください。
SVGはベクター形式で、任意のサイズで鮮明にレンダリングされますが、実際にSVGをサポートしていないコンテキスト（古いメールクライアント、特定の印刷パイプライン）にラスター出力が必要な場合、画像コンバーターはSVGを任意のピクセルサイズでPNG、JPG、またはWebPにレンダリングします。複数のSVGを単一の共有ドキュメントにバンドルするには、画像からPDFへのコンバーターがそれらを複数ページのPDFにパックします。
バッチ最適化とプライバシー
各最適化はサーバー上のメモリ内で実行されます。ファイルは最適化エンドポイントにストリーミングされ、テキストとして処理され（SVG自体はテキストであり、JPGやPNGのようなバイナリではありません）、JSON応答内で返されます。ディスクに書き込まれたり、インデックス付けされたり、ログに記録されたり、キャッシュされたりすることはありません。バッファは応答が送信されると同時に解放されます。1バッチあたり最大50ファイル、ファイルあたり40MBまで。ZIPアーカイブはサーバー側で解凍され、各エントリは同じ50ファイルの上限にカウントされます。同じ3つのオプションがバッチ内のすべてのファイルに適用されます。出力は個別に返されるか、1ファイル以上のバッチの場合は単一ダウンロードZIPに再パッケージ化されます。
よくある質問
手作成またはデザインツールエクスポートされたほとんどのSVGでは、20～60%のサイズ削減が期待できます。正確な削減量は、ソースがどのように生成されたかによって異なります。埋め込みメタデータ、コメント、インデントマークアップを含むIllustratorおよびSketchエクスポートは最も削減できます（40%以上になることがよくあります）。既にクリーンなSVG（手書きまたは別のツールで事前にクリーンアップされたもの）は削減が少なくなります。削減はコメント、メタデータブロック、XML宣言、タグ間の空白から得られます。実際の見える範囲のマークアップは変わりません。
はい。ツールはXMLコメント、メタデータブロック、XML宣言、タグ間の空白のみを削除します。これらはレンダリングに影響しません。パス座標、属性、塗りつぶし、ストローク、変換、viewBox、グラデーション、フィルター、アニメーションはすべて変更されずに通ります。出力はすべてのブラウザでピクセル単位で同じ結果を生成します。
いいえ。パスデータはそのまま保持されます。47.3892756432198として書かれた座標は、出力でも13桁のままです。ツールは意図的に控えめに設計されており、SVGジオメトリには全く触りません。これにより、出力は安全であり、ソースと視覚的に同一であることが保証されます。小数丸めとパス簡略化を含む深い最適化が必要な場合は、その後、SVGOなどの専用ツールで最適化されたファイルを実行してください。
HTMLにインラインで埋め込まれたSVGまたは最新ブラウザのimg/objectタグで参照されたSVGの場合、はい。XML宣言（<?xml version="1.0" encoding="UTF-8"?>）はオプションで、インラインSVGから定期的に省略されます。application/svg+xml MIMEタイプで提供されるスタンドアロンSVGファイルの場合、宣言はXML仕様で技術的には推奨されていますが、最新のブラウザはそれを必要としません。特定のコンシューマー（印刷ワークフロー、古いXMLパーサー）がその不在について文句を言う場合は、メタデータ削除オプションをオフにして、宣言をファイルに保持してください。
はい。最適化されたファイルはまだ完全に有効なSVGで、任意のベクターエディター（Illustrator、Inkscape、Figma、Sketch等）で開くことができます。ただし、空白が圧縮されているため、テキストエディターで手動調整のためにファイルを開く場合、ソースは著しく読みにくくなります。推奨されるワークフローは、元のインデント版をソースの真実として保持し、最適化版のみを本番環境に供給することです。変更が必要な場合は、ソースを編集して最適化ツールを再度実行してください。
いいえ。SMILアニメーション（animate、animateTransform、animateMotion）、CSSクラスとインラインスタイル、IDを介したJavaScriptフック、クリック/ホバーインタラクションターゲットはすべて見える範囲のマークアップに存在し、ツールは触りません。削除されるのはコメント、メタデータブロック、XML宣言、タグ間の空白のみです。アニメーションロゴ、インタラクティブSVG図、埋め込みCSSアニメーションはすべて以前と同じように機能し続けます。
SVGOはSVGを意味的に理解する深い最適化ツールです。パスの簡略化、小数座標の丸め、属性の重複排除、兄弟要素のマージ、未使用defの削除、色値の短縮などが可能です。このツールはコメント、メタデータ、空白のみを削除するライトウェイトなテキストレベルクリーナーです。違いは保守性にあります。このツールはジオメトリや属性に触らないため、SVGを壊すことはありません。SVGOは積極的なプラグインの1つが実行されるときに、微妙なレンダリングの違いを時々導入することができます。ほとんどの用途では、ここでのライトウェイトクリーンアップで十分です。最小バイト最適化の場合は、その後にSVGOを実行してください。
はい。1バッチあたり最大50のSVGファイル、ファイルあたり40MB。同じ3つのオプション（コメント削除、メタデータ削除、空白圧縮）がバッチ内のすべてのファイルに適用されます。これはアイコンセット全体またはデザインツールエクスポートのフォルダを最適化する場合に必要な機能です。ZIPアーカイブはサーバー側で解凍され、各エントリは同じ50ファイルの上限にカウントされます。出力は個別に返されるか、1ファイル以上のバッチの場合は単一ダウンロードZIPに再パッケージ化されます。
いいえ。ファイルはサーバー上のメモリ内でテキストとして完全に処理されます。ディスクに書き込まれたり、インデックス付けされたり、ログに記録されたり、キャッシュされたりすることはありません。バッファは応答が送信されると同時に解放されます。ツールは登録を必要とせず、最適化したSVGファイルを追跡しません。