SVG 最適化

SVG 最適化ツール

SVGO でエディタの余分なデータを削り、座標を丸め、path を結合 — すべての項目を自分で選び、前後を並べて確認できます。

SVG 最適化

☞ すべてブラウザ内で処理 — アップロードは一切ありません

ここに SVG をドロップ

またはクリックして選択 — SVG のみ

小さく、見た目はそのまま

SVG ファイルが必要以上に大きくなる理由

デザインアプリから書き出したファイルには、エディタのメタデータ、使われていない定義、小数点以下十数桁の座標が入っています。どれも見た目には影響しませんが、すべて訪問者に配信されます。

SVGO はそれらを安全に取り除きます。前後を並べたプレビューは、必要なものまで消えていないか確かめるためのものです — path の結合や id の整理は、他のコードが依存しているファイルを変えてしまうことがあります。

3 ステップ

SVG を最適化する手順

01

SVG をドロップ

.svg ファイルを選びます — 端末から出ることはありません。

02

項目を選ぶ

削除する項目を切り替え、小数精度を指定します。

03

見比べて保存

両方のプレビューを確認し、コードをコピーするか保存します。

かんたん解説

SVG 最適化のよくある質問

最適化で SVG が壊れませんか?

単体の図形であれば既定の設定は安全です。注意が必要なのは 2 つで、path の結合は文書構造を変え、id 属性の整理は CSS や JavaScript が参照している名前を変えてしまいます。アニメーションやスクリプトを含むファイルではオフにしてください。

小数精度はいくつにすればよいですか?

3 が無難な既定値です。単純なアイコンなら 1–2 でも問題ないことが多く、さらに小さくできます。一方、描き込んだイラストや地図は 3 未満で目に見えて崩れることがあります — 前後のプレビューで確認できます。

軽量化ツールとの違いは何ですか?

軽量化ツールは同じエンジンを標準プリセットで動かすだけで、選ぶ項目はありません。とにかく小さくしたいときはそちらを、何を削るか細かく決めたいときはこのページをお使いください。

ファイルはアップロードされますか?

いいえ。SVGO はブラウザ内で動作し、ファイルが端末から出ることはありません。