本文へスキップ
ToolMug

SVG 最適化

ブラウザで SVGO を使って SVG を圧縮します。Illustrator、Inkscape、Figma が書き出し時に追加するメタデータ、コメント、不要な属性を削除し、パスデータと小数を短くして見た目を保ったままファイルを小さくします。複数ファイルを一度に処理したり、SVG コードを貼り付けたりできます。

ブラウザ内で動作 — 入力した内容はアップロードされません

3

座標をこの桁数に丸めます。ほとんどのアイコンでは 2〜3 桁でも見た目は変わりません。桁数を減らすとファイルは小さくなりますが、細部が崩れることがあります。

またはここにファイルをドロップ(複数可)

または SVG コードを貼り付け
最適化された SVG

使い方

  1. SVG ファイルを選ぶかドロップします。複数選択もできます。下の入力欄に SVG コードを貼り付け、「サンプルを読み込む」をクリックすることもできます。
  2. 小数点以下の桁数などのオプションを調整します。結果はすぐ更新され、各ファイルの縮小率が表示されます。
  3. 最適化後のファイルを個別にダウンロードするか、「すべてダウンロード(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 はブラウザ内で動作し、ファイルは端末内で読み取り・処理されます。

プライバシー

このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。

関連ツール