SVG 最適化
☞ すべてブラウザ内で処理 — アップロードは一切ありませんここに SVG をドロップ
またはクリックして選択 — SVG のみ
最適化の前後
SVG 最適化
SVGO でエディタの余分なデータを削り、座標を丸め、path を結合 — すべての項目を自分で選び、前後を並べて確認できます。
またはクリックして選択 — SVG のみ
最適化の前後
小さく、見た目はそのまま
デザインアプリから書き出したファイルには、エディタのメタデータ、使われていない定義、小数点以下十数桁の座標が入っています。どれも見た目には影響しませんが、すべて訪問者に配信されます。
SVGO はそれらを安全に取り除きます。前後を並べたプレビューは、必要なものまで消えていないか確かめるためのものです — path の結合や id の整理は、他のコードが依存しているファイルを変えてしまうことがあります。
3 ステップ
.svg ファイルを選びます — 端末から出ることはありません。
削除する項目を切り替え、小数精度を指定します。
両方のプレビューを確認し、コードをコピーするか保存します。
かんたん解説
単体の図形であれば既定の設定は安全です。注意が必要なのは 2 つで、path の結合は文書構造を変え、id 属性の整理は CSS や JavaScript が参照している名前を変えてしまいます。アニメーションやスクリプトを含むファイルではオフにしてください。
3 が無難な既定値です。単純なアイコンなら 1–2 でも問題ないことが多く、さらに小さくできます。一方、描き込んだイラストや地図は 3 未満で目に見えて崩れることがあります — 前後のプレビューで確認できます。
軽量化ツールは同じエンジンを標準プリセットで動かすだけで、選ぶ項目はありません。とにかく小さくしたいときはそちらを、何を削るか細かく決めたいときはこのページをお使いください。
いいえ。SVGO はブラウザ内で動作し、ファイルが端末から出ることはありません。