SVGと画像ファイルの容量の差を検証

こんにちは。和田です。
最近、寒いですが皆様いかがお過ごしでしょうか？
自分はちょっと喉の調子が良くないです。皆様も体調にはお気をつけ下さい。

さて、今後数回に分けて、デザイナー視点でSVGファイルについて書いてみようと思います。
（あくまでデザイナー視点ですのでIllustratorで作成した図をSVG保存して、どうなるか…みたいな事を書いていきたいと思います。）

最初は、同じ図をSVGファイルと画像ファイルに書き出した際、容量にどれくらいの差がでるか試してみました。
比較の際は、以下の要領で行っています。
・SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG（1.1）にしています。
・SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。（PC用サイトの小さいサイズの図をこの程度と想定して設定しました）
・保存形式はJPG「高画質」にしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の５種類です

◆ 規則正しい簡単な図の場合（パス数：122）

まずは、規則正しい図、今回はカラーチャートのような図で比較してみました。以下のような２つの図です。描いてみて思ったんですがなんだかユ◯クロのHEATTECHみたいになってしまいました。（汗）

図−１

図−２

以下がSVGとJPEGにした場合の比較です。

※ グレー背景はSVGデータの以上の容量になったものです。

これくらい簡単な図だと、画像にするよりSVGの方が容量が軽くなるのですね。
結構オドロキです。
あと、なぜかJPEGの４倍画像（1280×1280px）の容量が小さくなります。う〜ん。なんでだろう…。こっちもオドロキです。

◆ 会社案内の地図の場合（パス数：186）

実際は、会社案内の図などはGoogleMapsを使う事が多いとは思うのですが、とりあえず試しにやってみました。

図−３

SVG、JPEG比較図

※ グレー背景はSVGデータの以上の容量になったものです。

こちらは、2倍（640×640px）サイズまでは画像が軽かったです。
思ったより、SVGが軽く出来上がっていました。

◆ Webサイトにありそうな!?簡単な図の場合（パス数：529）

次は、以前に作成した図（といっても、素材を使ってチャチャッとですが）を比較してみたいと思います。Webにありそうな感じ…。微妙ですかね（汗）
この図は、320×220pxで作成しています。

図−４

SVG、画像比較図

※ グレー背景はSVGデータの以上の容量になったものです。

これくらいの図だと３倍（960×660px）くらいまでは画像の方が軽くなるのですね。ただ、今回は文字を少なめなので、フォントを埋め込みにするともっと容量の差がでるかもしれません。

と、ここまで３つの簡単な図で比較してみましたが、
ここで見る限りでは、Webで使う簡単な図は、同じサイズであれば画像の方が軽くなるようです。２〜３倍大きくても画像の方が軽いようです。
ただ、レスポンシブデザインのようにワンソースで高解像度のモバイルデバイスもターゲットにする場合、画像ですと高解像度デバイス用に３倍程度大きい画像も用意しなくてはならなくなるので、合計するとSVGファイルと同じくらいの容量になりそうです。

あと、SVGのファイルサイズはパスの数とフォントの有無で大分変わりそうですので、この辺りは次回、検証してみたいと思います。

それでは、また次回です。