SVGとPNGについて

webサイトの開発やスマホアプリ開発の中で利用する画像は、ベクター画像とビットマップ画像の2種類があります。最近は、SVGが良く使われるようになってきました。普段あまりデザイン、画面周りの開発を行わないメンバーに説明する機会があったので、その時説明した内容をまとめておこうと思います。

SVGとは

SVGは、Scalable Vector Graphicsのことです。画像オブジェクトには、ベクター画像オブジェクトと呼ばれる画像形式があり、画像を数値化したものを記憶している画像形式です。SVGは、この画像形式にあたります。

PNGとは

PNGは、Portable Network Graphicsのことです。画像オブジェクトには、ラスタ画像オブジェクトと呼ばれる画像形式があり、pixelごとに色・濃度の情報を記録する画像形式です。PNGは、この画像形式にあたります。

SVGが得意なこと

画像を数値化しているため、解像度を気にする必要がありません。
単純な画像だとデータがすっきりしているため、処理が早く描画が早い

PNGが得意なこと

写真のような細かい描画を意識する必要があるものは、SVGは苦手ですが、PNGでは綺麗に表示出来ます。

まとめ

今回は、すごく簡単ですが、SVGとPNGについて記載しました。それぞれの元になっている土台が違うので一概にどちらが良いかということはなかなか決めづらいところではありますが、近年では、マルチデバイスやレスポンシブル性を意識した画面設計が求められることが多くなり、SVGであれば、どの画面でも特に意識しなくても表示できるため、比較的推奨されているように感じます。PNGにも良い点はあるので、上手く使い分けをしていくことが大事ですね。