Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
デザイン・UI
タグ :
SVG
Illustrator
Photoshop
PNG
JPG
こんにちは。和田です。
最近、寒いですが皆様いかがお過ごしでしょうか?
自分はちょっと喉の調子が良くないです。皆様も体調にはお気をつけ下さい。

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

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


◆ 規則正しい簡単な図の場合(パス数:122)


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

図−1

図−2




以下がSVGとJPEGにした場合の比較です。
サイズ保存形式図ー1図ー2
原寸
(320×320px)
SVG12KB8KB
原寸
(320×320px)
JPEG25KB49KB
2倍
(640×640px)
JPEG37KB115KB
3倍
(960×960px)
JPEG94KB188KB
4倍
(1280×1280px)
JPEG37KB225KB
5倍
(1600×1600px)
JPEG168KB332KB

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

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



◆ 会社案内の地図の場合(パス数:186)


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

図−3


SVG、JPEG比較図
サイズ保存形式地図
原寸
(320×320px)
SVG98KB
原寸
(320×320px)
JPEG33KB
2倍
(640×640px)
JPEG82KB
3倍
(960×960px)
JPEG143KB
4倍
(1280×1280px)
JPEG217KB
5倍
(1600×1600px)
JPEG291KB

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

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


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


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

図−4


SVG、画像比較図
サイズ保存形式図−4
原寸
(320×220px)
SVG98KB
原寸
(320×220px)
JPEG29KB
2倍
(640×440px)
JPEG61KB
3倍
(960×660px)
JPEG106KB
4倍
(1280×880px)
JPEG156KB
5倍
(1600×1100px)
JPEG213KB

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

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



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

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

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