SVG画像の特性

私がAndroidアプリの開発で使用する画像の主なファイル形式はSVGとPNGです。
それぞれのファイル特性と使い分けについてまとめました。

SVG(Scalable Vector Graphics)

SVGファイルは、ベクター画像。
ベクター画像(Vector graphics)と呼ばれる画像形式は、画像を点の集合で表現するのではなく、複雑な計算式によって色や曲線を表現。

特性

• 拡大縮小しても画質が劣化しない
  • Androidは、端末によって画面サイズや解像度がばらばらなので、このメリットが非常に大きい
• 数式や文字を用いたデータファイルなので、エンジニア側で色や透過度の変更が可能
• 形が複雑でなければファイルサイズは小さい
• アニメーション可能
• 透過可能

PNG(Portable Network Graphics)

PNGは、ビットマップ画像。（「GIF」「JPEG」も同様。）
ビットマップ画像(Bitmap graphics)は、画像を格子状に細かい点(ピクセル, 画素)に分割し、それぞれの点に色や輝度などの情報を与えて表現する方法。

特性

• 拡大縮小すると1ピクセルの大きさも大きくなってしまうため、どうしても画像がギザギザに粗くなる
• エンジニア側で色や透過度の変更はできない
• ベクター画像に比べるとファイルサイズが大きくなりがち
• アニメーション可能
• 透過可能

ベクター画像とビットマップ画像の使いわけ

以上の特性を読むと、SVGの圧倒的勝利にみえる。
しかし、SVGにもデメリットがある。

それは、写真や文字など複雑で繊細な配色や曲線の画像描画が苦手な事。
SVGは、複雑な計算式によって色や曲線を表現するので、写真などたくさんの色を使う描写には不向き。

風景など複雑な画像を計算式によって図形として扱うには膨大な計算が必要になるからです。

実際、小さなアイコン画像でも文字など複雑な曲線などを含んでいると、画像が崩れて表現されてしまったりしました・・・

以上からざっくりですが、

• 写真や複雑な配色・曲線を必要とする画像の作成にはPNG
• アイコンなど複雑でない画像の作成にはSVG

と覚えておいて使い分けていくとよさそうです。

ただアプリ開発においては、特に拡大縮小しても画質が劣化せず、ファイルサイズも比較的小さくて済むSVG画像の特性は大きいので、複雑な画像でなければ、どの画面上でも明瞭に画像を表示できるSVGが比較的推奨されます。