こんにちは。和田です。
とうとう12月になりました。師走ですね。これからの年末、自分も頑張って走り抜けようと思います。
さて、今回は前回に引き続きといいますか、
「PNG,GIFとSVGを比較した方がよいのでは！？」というご意見いただきましたので、そちらの比較をしてみようと思います。
同じ図をSVGとPNG,GIF,JPGに出力して比較します。
画像の書き出し方法等は以下のとおりです。
・SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG（1.1）にしています。
・SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。（PC用サイトの小さいサイズの図をこの程度と想定して設定しました）
・保存形式はPNG、GIF、JPGにしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の５種類です
・JPGの品質は「高画質」にしています。
・PNGは「PNG-24」「透明部分：なし」で書き出しています。
・GIFは「特定カラー：256」「ディザ処理アルゴリズム：誤差拡散法 100%」「透明部分：なし」で書き出しています。
◆ 規則正しい簡単な図の場合（パス数：122）
今回も規則正しい図（カラーチャートのような図）から比較してみました。以下のような２つの図です。
図−１
図−２
以下がSVG,JPEG,PNG,GIFの比較です。
| サイズ（保存形式） | 図ー１ | 図ー２ | ||||||
|---|---|---|---|---|---|---|---|---|
| SVG | JPEG | PNG | GIF | SVG | JPEG | PNG | GIF | |
| 原寸 （320×320px） |
12KB | 25KB | 4KB | 12KB | 8KB | 49KB | 29KB | 25KB |
| ２倍 （640×640px） |
37KB | 5KB | 29KB | 115KB | 70KB | 45KB | ||
| ３倍 （960×960px） |
94KB | 8KB | 45KB | 188KB | 102KB | 66KB | ||
| ４倍 （1280×1280px） |
37KB | 12KB | 53KB | 225KB | 139KB | 94KB | ||
| ５倍 （1600×1600px） |
168KB | 16KB | 78KB | 332KB | 180KB | 119KB | ||
※ グレー背景はSVGデータの以上の容量になったものです。
図−１については、PNGの容量が３倍の大きさまでSVGよりも小さくなりました。256色以下になるため、PNGの圧縮率が高くなったのかなと思います。
図−２ですと、今度は円の曲線部分のグラデーションが出てくるのでPNGの容量も大きくなってしまいました。代わりに画像の中ではGIFが一番小さくなりましたがSVG程の軽さまでは行きませんでした。
単純な曲線が入った図はSVGにあっているかもしれませんね。
◆ 会社案内の地図の場合（パス数：186）
次は、会社案内の図です。こちらも前回同様です。
SVG、JPEG比較図
| サイズ（保存形式） | 図ー３ | |||
|---|---|---|---|---|
| SVG | JPEG | PNG | GIF | |
| 原寸 （320×320px） |
98KB | 33KB | 33KB | 20KB |
| ２倍 （640×640px） |
82KB | 74KB | 41KB | |
| ３倍 （960×960px） |
143KB | 119KB | 66KB | |
| ４倍 （1280×1280px） |
217KB | 164KB | 90KB | |
| ５倍 （1600×1600px） |
291KB | 217KB | 115KB | |
※ グレー背景はSVGデータの以上の容量になったものです。
図−３ですと、GIFが一番軽くなり、PNGはJPEGと大して変わらない値になりました。
色数が少ないということと、横方向に同じ色が続いている事がGIFを軽くさせたのではないかと思います。
◆ Webサイトにありそうな!?簡単な図の場合（パス数：529）
最後は簡単な図です。こちらも前回同様です。
320×220pxで作成しています。
SVG、画像比較図
| サイズ（保存形式） | 図ー４ | |||
|---|---|---|---|---|
| SVG | JPEG | PNG | GIF | |
| 原寸 （320×220px） |
156KB | 29KB | 33KB | 16KB |
| ２倍 （640×440px） |
61KB | 74KB | 37KB | |
| ３倍 （960×660px） |
106KB | 123KB | 61KB | |
| ４倍 （1280×880px） |
156KB | 168KB | 90KB | |
| ５倍 （1600×1100px） |
213KB | 221KB | 119KB | |
※ グレー背景はSVGデータの以上の容量になったものです。
図−４ですと５倍の大きさにしてもGIFが一番軽くなりました。色数が少ないからだと思います。色数が増えた場合はディザの表現の限界も出てくると思いますので、そうした場合は他の画像と見比べてベストなのを選ぶのがいいかもしれません。
PNGはJPEGより少し大きくなりました。
さて、前回の追記と言う形でPNGとGIFについても比較してみましたが、今回の検証で使った図だけで言えば、Webで使われるような簡単な図ではGIFが一番軽いようです。
ただ、もっといろいろな図で検証すると他の結果もでてくるかもしれません。
ですので、サイトの環境に応じてベストなものを選ぶのがいいかもしれません。
個人的には、他の媒体（印刷物など）にも利用しやすいSVGが広まってほしい気がします。そう考えるのは僕だけですかね？
次回はフォントの埋込を検証してみたいと思います。
それでは、また次回です。