SVG を最適化
SVG ファイルをオンラインで最適化して圧縮する
SVGO を使用して、不要なメタデータ、エディター データ、グループ、精度を削除します。安全、バランス、または最大の最適化を選択し、個々のパスを微調整して、ダウンロードする前に結果を比較します。すべてがブラウザ内で実行されます。
新規ファイルの既定値を編集しています
プレビュー
プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。
SVG とは
SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVGはWeb標準のベクター形式です。すべての最新ブラウザでネイティブに表示でき、CSSでの装飾やJavaScript、SMILによるアニメーションにも対応します。ロゴ、アイコン、イラストでは軽量になりやすい一方、複雑なSVGはファイルサイズが大きくなる場合があります。
SVG を最適化するのはどんなとき
Illustrator、Figma、Inkscape、または Sketch からエクスポートされたファイルには、ブラウザーが必要とするよりも高い精度でエディターのメタデータ、非表示レイヤー、ネストされたグループ、および座標が含まれています。 SVG を HTML にインライン化したり、コンポーネント ライブラリに同梱したり、アイコンとして提供したりする前に、SVG を最適化してください。マークアップが小さいほど、特に HTML または JavaScript で繰り返される場合、転送と解析が速くなります。元のソース ファイルを保持します。最適化は一方向であり、縮小されたパス データは手動で編集するのが困難です。
SVG をオンラインで最適化する方法
- 1
SVG をドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 2
「安全」「バランス」「最大」から選び、不要な処理を個別に切ると、ファイルごとの削減率がその場で更新されます。
- 3
「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。
ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。
よくある質問
最適化すると SVG の見た目は変わりますか？
Safe は最も保守的なプリセットです。また、Balanced は座標を丸め、冗長な属性を削除します。一方、 Maximum は重複した形状をマージし、固定寸法を削除します。より積極的なパスは、細かいディテールやサイズに影響を与える可能性があるため、ダウンロードする前にピクセル差分を使用して結果を確認してください。
「安全」「バランス」「最大」は何が違いますか？
3 つは積み重ねの段階です。「安全」はマークアップを削除するだけの 9 つの処理を実行します。XML 宣言、コメント、メタデータ、エディタの名前空間、未使用の定義、素通しのグループ、長い色の表記、余分な空白です。「バランス」はこれに属性の整理、不可視要素の削除、パスの書き換え、座標の丸めを加えます。「最大」はさらに重複の統合と width・height の削除を加え、ファイルが小さくならなくなるまですべての処理を繰り返します。個々の処理は「詳細設定」でそれぞれ切ることができます。
最適化してもファイルがほとんど小さくならないのはなぜですか？
たいていは、すでに最適化済みであるか、これ以上短くできないパスデータがサイズの大半を占めているか、data URI で埋め込まれたラスター画像が大半を占めているためです。埋め込み画像にこのツールは一切手を加えません。手描きの絵柄では、小数桁を減らすのが残された最も効果の大きい手段になるのが普通です。表示されているのは圧縮前のファイルサイズである点にもご注意ください。サーバー側の gzip や Brotli でさらに大きく縮み、マークアップがきれいなほど圧縮も効きます。