SVG 圧縮：SVGOでSVGファイルをオンライン最適化

SVGファイルをここにドロップ クリックしてファイルを選ぶか、Ctrl+Vで貼り付け

SVG

ブラウザ内で処理 · ファイルは端末から出ません

SVGを圧縮する方法

SVGを追加します。 ドロップするか、クリックして選ぶか、貼り付けます。
小数点以下の桁数を決めます。 桁数を減らすほどファイルは小さくなります。輪郭がずれていないか、プレビューで確認してください。
2つのプレビューを見比べます。 元のファイルと最適化したファイルが、削減できたサイズと一緒に並んで表示されます。
ダウンロードするか、コードをコピーします。 ファイル名の末尾には.min.svgが付きます。

SVG最適化で取り除かれるもの

デザインツールは、ブラウザが使わないデータをSVGに書き込みます。編集ソフト独自の名前空間やメタデータ、コメント、非表示のレイヤー、空のグループ、初期値と同じ属性、画面では表示しきれないほど桁数の多い座標などです。このツールは、多くのWeb制作のビルドツールで使われているオープンソースの最適化ツールSVGOを、安全なプラグインの初期設定で使っています。

小数点を丸めてSVGを圧縮

SVGの中でいちばん大きな部分はたいていパスのデータで、その多くは小数です。24 pxのアイコンに描かれた12.483920という座標は、12.48と見た目が変わりません。この丸め方を決めるのが「小数点以下の桁数」のスライダーです。アイコンなら1〜2桁で足りることが多く、細かいイラストや地図なら3桁を残してください。「削減できなくなるまで繰り返す」はプラグインを何度もかけるので、複雑なファイルをもう少し小さくできます。

Web用にSVGファイルを圧縮：レスポンシブ設定

widthとheightを削除にチェックを入れると、固定の寸法を外してviewBoxだけを残します。するとSVGは親要素の幅に合わせて伸び縮みするようになり、CSSでレイアウトするアイコンやロゴにはこれが適しています。SVGを決まったサイズで表示する必要がある場合は、チェックを外したままにしてください。

SVG圧縮のよくある質問

最適化するとSVGの見た目は変わりますか？

初期設定のプラグインは、ほとんどのファイルで安全に使えます。小数点以下の桁数をかなり少なくすると細部がずれることがあるので、ダウンロード前に2つのプレビューを見比べてください。

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

いいえ。SVGOはブラウザ内で動いています。

スクリプトは削除されますか？

初期設定では、スクリプトを意図して取り除くことはしません。使う前にファイルの中身を確かめたいときは、SVGビューアで開いてください。

無料で使えますか？

はい。回数の制限も登録もありません。