SVGファイルのサイズ
WebサイトをRetinaディスプレイ対応にする手段のひとつとして、SVG画像の利用が考えられます。しかし「ビットマップ画像に比べてファイルサイズが大きい」という理由で導入にいたらないケースもあるようです。
実際に実用にならないほどファイルサイズが大きいのか、SVGのファイルサイズを小さくするにはどういう方法があるのかを調べてみました。
SVGとPNGのファイルサイズ比較
Inkscapeに同梱されているサンプルファイルで比較してみます。(小数点以下四捨五入)
項目 | |||
---|---|---|---|
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 SVG | 10KB | 142KB | 517KB |
プレーンSVG | 3KB | 35KB | 107KB |
圧縮率 | 30% | 25% | 21% |
ファイルの内容にもよりますが、70%~80%程度のファイルサイズが削減されています。ファイルのメンテナンス性を考えると、サイズ圧縮したい場合にはこの形式がもっともお勧めです。
プレーンSVG形式で保存する
何らかの事情で圧縮形式は利用できないけれどもファイルサイズを圧縮したい場合には、プレーンSVG形式を利用します。プレーンSVGで保存するには、メニューの「ファイル(F) → 名前を付けて保存(A)」から「ファイルの種類」に「プレーンSVG (*.svg)」を選択して保存します。
ファイル形式 | |||
---|---|---|---|
Inkscape SVG | 10KB | 142KB | 517KB |
プレーンSVG | 9KB | 115KB | 404KB |
圧縮率 | 90% | 81% | 78% |
10%~20%程度のファイルサイズが削減されています。圧縮する方法に比べると削減率は大きくありません。
プレーンSVG圧縮形式で保存する
とにかく最大限圧縮したい場合には、プレーンSVG圧縮形式で保存します。プレーンSVG圧縮形式で保存するには、メニューの「ファイル(F) → 名前を付けて保存(A)」から「ファイルの種類」に「プレーンSVG圧縮 (*.svgz)」を選択して保存します。
ファイル形式 | |||
---|---|---|---|
Inkscape SVG | 10KB | 142KB | 517KB |
プレーンSVG圧縮 | 3KB | 30KB | 87KB |
圧縮率 | 30% | 21% | 17% |
70%~80%強のファイルサイズが圧縮されています。
最適化SVG形式で保存する
圧縮形式を使わずに最大限圧縮したい場合には、プレーンSVG圧縮形式で保存します。最適化SVG形式で保存するには、メニューの「ファイル(F) → 名前を付けて保存(A)」から「ファイルの種類」に「最適化SVG (*.svgz)」を選択して保存します。
ファイル形式 | |||
---|---|---|---|
Inkscape SVG | 10KB | 142KB | 517KB |
最適化SVG | 7KB | 83KB | 241KB |
圧縮率 | 70% | 58% | 46% |
30%~50%程度のファイルサイズが削減されています。Inkscapeから直接保存することはできませんが、最適化SVGをgzip圧縮すればさらにファイルサイズを小さくすることが可能です。