SVGファイルのサイズ

WebサイトをRetinaディスプレイ対応にする手段のひとつとして、SVG画像の利用が考えられます。しかし「ビットマップ画像に比べてファイルサイズが大きい」という理由で導入にいたらないケースもあるようです。

実際に実用にならないほどファイルサイズが大きいのか、SVGのファイルサイズを小さくするにはどういう方法があるのかを調べてみました。

SVGとPNGのファイルサイズ比較

Inkscapeに同梱されているサンプルファイルで比較してみます。(小数点以下四捨五入)

項目 inkscape tiger car
SVG 10KB 142KB 517KB
PNG (90dpi) 7KB 172KB 294KB
PNG (180dpi) 16KB 405KB 847KB
原寸画像サイズ 128×128 545×562 879×478

Retina対応を考えると、従来ディスプレイ用とRetinaディスプレイ用に2枚の画像を用意し、ディスプレイの種類に応じて表示する方法をとることが多いようです。当然ながらベクタ画像は画像の大きさとサイズは無関係ですが、ビットマップ画像は解像度が高くなるほどサイズが大きくなります。

上記ではいずれの例でも実用に耐えないほどSVGのファイルサイズが大きいようには見えませんが、次のような条件が重なるとPNGファイルに比べてSVGファイルのサイズが大きくなっていきます。

  • SVGファイルをIllustratorなどのドローツールから出力
  • 画像内でオブジェクトをいくつも重ねている

ファイルサイズは画像の条件によって変わります。あくまで参考値として見てください。

SVGファイルのサイズを小さくする方法

SVG圧縮形式で保存する

Inkscapeでもっとも簡単なサイズ削減方法は、Inkscape SVG圧縮形式で保存することです。メニューの「ファイル(F) → 名前を付けて保存(A)」から「ファイルの種類」に「Inkscape SVG圧縮 (*.svgz)」を選択して保存します。

ファイル形式 inkscape tiger car
Inkscape SVG 10KB 142KB 517KB
プレーンSVG 3KB 35KB 107KB
圧縮率 30% 25% 21%

ファイルの内容にもよりますが、70%~80%程度のファイルサイズが削減されています。ファイルのメンテナンス性を考えると、サイズ圧縮したい場合にはこの形式がもっともお勧めです。

プレーンSVG形式で保存する

何らかの事情で圧縮形式は利用できないけれどもファイルサイズを圧縮したい場合には、プレーンSVG形式を利用します。プレーンSVGで保存するには、メニューの「ファイル(F) → 名前を付けて保存(A)」から「ファイルの種類」に「プレーンSVG (*.svg)」を選択して保存します。

ファイル形式 inkscape tiger car
Inkscape SVG 10KB 142KB 517KB
プレーンSVG 9KB 115KB 404KB
圧縮率 90% 81% 78%

10%~20%程度のファイルサイズが削減されています。圧縮する方法に比べると削減率は大きくありません。

プレーンSVG圧縮形式で保存する

とにかく最大限圧縮したい場合には、プレーンSVG圧縮形式で保存します。プレーンSVG圧縮形式で保存するには、メニューの「ファイル(F) → 名前を付けて保存(A)」から「ファイルの種類」に「プレーンSVG圧縮 (*.svgz)」を選択して保存します。

ファイル形式 inkscape tiger car
Inkscape SVG 10KB 142KB 517KB
プレーンSVG圧縮 3KB 30KB 87KB
圧縮率 30% 21% 17%

70%~80%強のファイルサイズが圧縮されています。

最適化SVG形式で保存する

圧縮形式を使わずに最大限圧縮したい場合には、プレーンSVG圧縮形式で保存します。最適化SVG形式で保存するには、メニューの「ファイル(F) → 名前を付けて保存(A)」から「ファイルの種類」に「最適化SVG (*.svgz)」を選択して保存します。

ファイル形式 inkscape tiger car
Inkscape SVG 10KB 142KB 517KB
最適化SVG 7KB 83KB 241KB
圧縮率 70% 58% 46%

30%~50%程度のファイルサイズが削減されています。Inkscapeから直接保存することはできませんが、最適化SVGをgzip圧縮すればさらにファイルサイズを小さくすることが可能です。