【拡大してもきれい】SVGを使ったサイト制作のススメ

こんにちは。音動でWebプロジェクトリーダーをやっています。植田です。

Webで使用する画像データにはいろいろな形式があります。
JPG / PNG / GIF 等、それぞれメリット・デメリットがありますが、今回はSVGについて紹介します。

そもそも画像データには2種類あります

画像データにはラスターデータというものと、ベクターデータというものがあります。
ラスターデータは「ドット」の集合体のデータ、ベクターデータは「ドット」の概念が無く、座標データが記憶されているデータです。

細かく説明しだすとこれだけで一記事書けそうなボリュームなのでざっくりにはなりますが、

ラスターデータ

メリット：　細かな質感を出すことに長ける
デメリット：データが大きく、拡大・縮小に弱い

ベクターデータ

メリット：　データが軽く拡大・縮小に強い
デメリット：細かい表現が難しい

のように分類できます。

写真等のデータはベクターデータにはできませんが、比較的簡単な図形で表現できるロゴや文字画像などは、SVGで作るのがおすすめです。

「画面解像度」の問題も

また、MacでWebサイトを見た時に、ロゴやアイコンが滲んだり、ぼやけて見えた経験はありませんか？実はRetina Displayを使用したMacでは、通常のディスプレイ（72ppi）よりも解像度が高い(およそ326ppi)ため、通常のWeb用に制作した画像データでは、解像度が足りないのです。

Macだけでなく、既にスマホなどでも300ppiを超える解像度のディスプレイは身近に沢山ありますし、今後PCでもますます画面解像度が上がっていくことが想定されます。

音動の公式Webサイトでは、アイコン、ロゴ等をこの「SVG」形式で作っています。是非チェックしてみてください。