【画像フォーマット】「SVG」って何？Webデザインにおける導入メリット・デメリットなどをご紹介します！

こんにちは。
GOSHIMMERです。

今回は、Webデザイナーさん必見！画像フォーマット「SVG」についてご紹介します！

svgって何？

SVGとは画像フォーマットの一つです。
Webサイトを構成するときによく使われる、「PNG」、「JPG」、「GIF」などの仲間になります。
それでは、これらと何が違うのか、解説していきます。

SVGとは、「Scalable Vector Graphics」の略で、その名の通り拡大や伸縮をすることができる、ベクター形式の画像になります。

ベクター形式とは、一般的に扱われる「PNG」や「JPG」などのように、点（ピクセル、画素）に色などの情報を与えて表現するビットマップ形式と違って、複雑な計算式によって表現されています。Illustratorなどで作成することができます。

画像の座標情報などが、XMLで構成されているため、画像データをテキストエディタで開き、後から編集することができます。

前述のとおりビットマップ形式ではなくベクター形式なので、拡大・縮小することができ、1つのファイルで複数のデバイスや、Retinaディスプレイにも対応することができます。結果的に画像サイズが軽減されるのでWebサイト自体の表示速度も上がるというメリットがあります。

Retinaディスプレイ（レティナディスプレイ、レティーナディスプレイ、英: Retina Display）は、Apple製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。

出典元：Retinaディスプレイ

複雑な図形を変更することは難しいですが、色の変更や、クラス名、idを持たせることができます。

XMLで構成されるデータなので、要素を動かしたり、複雑な変形、エフェクトなどを加えてアニメーションをつくることができます。

いかがだったでしょうか。
最近ではWebデザインにおいて主流になっている「SVG」。
ビットマップ形式の画像データでもWebデザインはできますが、より高度な表現、
UIを意識した表現をするためにはどんどん取り入れていきたいなと思います。

また、SVGを導入しているWebサイトなどに関しては別で詳しくまとめていきたいと思います。