見た目はそのまま、サイズだけ小さいSVGに
Illustrator、Figma、Inkscape、Sketchから書き出したSVGには、ブラウザが一切描画しないデータが大量に含まれています。エディタのメタデータ、コメント、非表示レイヤー、小数点以下8桁の数値、グループの中のグループなどです。このツールはSVG最適化の定番ツールであるSVGOをブラウザ上で実行してそれらを取り除き、結果を元のファイルと並べて表示するので、変わったのがサイズだけであることを確認できます。
SVGを最適化する手順
- 1SVGファイルを1つ以上ドロップするか選択するか、SVGマークアップを貼り付けます。
- 2最適化前後のプレビューと、ファイルごとの削減サイズを確認します。
- 3ファイルをもっと小さくしたいときは精度を下げ、曲線がおかしく見え始めたら上げます。
- 4SVGOのプラグインを個別にオン・オフします。たとえば、width と height を削除するとSVGがCSSで拡大縮小されるようになります。
- 5最適化したSVGをダウンロードするか、マークアップをコピーするか、全ファイルをまとめてZIPでダウンロードします。
削除されるもの
- エディタのデータ
- メタデータ、コメント、XML宣言とdoctype、そしてInkscape・Illustrator・Sketchが自分用に追加する名前空間や属性。
- 冗長なマークアップ
- 空のグループや属性、デフォルト値、非表示の要素、使われていない定義やID、要素を1つだけ囲んでいるグループ。
- 冗長なジオメトリ
- パスデータは相対コマンドと少ない桁数で書き直され、図形はより短いパスに変換され、変形は可能な限り座標に組み込まれます。
安全なデフォルトと、より強力なオプション
デフォルトの設定はSVGO自身のプリセットで、画像が変わらないように選ばれています。追加オプションはさらに踏み込みますが、サイズ以外にも影響します。width と height を削除するとSVGがコンテナいっぱいに広がり、タイトルを削除するとスクリーンリーダーに名前が伝わらなくなり、xmlns の削除はHTMLにインラインで貼り付けるSVGにしか向きません。
先にビットマップをSVGに変換するには画像変換ツールを使ってください。変換したSVGをここへ直接送れます。結果を埋め込むには画像をBase64に変換を使ってください。
よくある質問
- SVGOやSVGOMGと同じものですか？
- SVGOそのもの、つまりSVGOMGと同じエンジンを、デフォルトのプリセットと同じプラグイン（スイッチとして）で実行しています。すべてブラウザ上で動作します。
- 最適化するとSVGの見た目は変わりますか？
- デフォルト設定なら変わりません。精度を極端に下げると細かい曲線がゆがむことがあり、一部の追加オプションはサイズ指定やアクセシビリティを変えます。違いは最適化前後のプレビューですぐに確認できます。
- 複数のSVGファイルをまとめて最適化できますか？
- はい。好きなだけドロップし、設定を一度変えればすべてに適用され、まとめてZIPでダウンロードできます。
- gzipサイズが表示されるのはなぜですか？
- WebサーバーはふつうSVGをgzipで圧縮して送るため、訪問者が実際にダウンロードするサイズにより近いからです。
- ファイルはアップロードされますか？
- いいえ。SVGOはブラウザ上で動作し、ファイルがお使いのデバイスの外に出ることはありません。