【SVG入門】SVGでベクターグラフィックス【その１】

こんにちは iijmyaです。
明けましておめでとうございます。

2ヶ月ぶりの更新となってしまいましたが、
今回はベクターグラフィックスを扱う、SVGについて書きたいと思います。

=============================== 目　次 ===============================

1．ベクターグラフィックスとビットマップグラフィックス
2．SVGの使用シーン
3．SVGを使ってみる(次回)

====================================================================

1．ベクターグラフィックスとビットマップグラフィックス

SVG(Scalable Vector Graphics)とは、ベクターグラフィックスを扱うための技術です。

ベクターグラフィックス(ベクター画像)は、一つ一つの点の座標(アンカー)やそれを結ぶ線などの図形情報を記憶しておき、
その図形情報を元に計算を行って図を描画するため、拡大や縮小をしてもそれに合わせて図を再描画するため、図が荒くなるのを防ぐことが出来ます。

ベクターグラフィックスと対の関係にあたるビットマップグラフィックス(ラスタ画像)は、
色の付いたドット(ピクセル)の羅列で図を描画します。

ビットマップグラフィックスは拡大・縮小に弱く、画像が荒くなってしまいますが、
ベクターグラフィックスは位置情報を元に図を描画するため、拡大・縮小に強い図形になります。

2．SVGの使用シーン

上記のようなベクターグラフィックスを扱うSVGですが、
どのようなときにビットマップグラフィックスではなく
ベクターグラフィックスを使うと、ハッピーになれるのかいくつかシーンを考えてみます。

■ オリジナルのフォントをSVGで作りたい！

→ ハッピー

ビットマップグラフィックスの場合、フォントサイズ(文字の大きさ)毎にフォントデータを用意する必要がありますが、
ベクターグラフィックスは拡大・縮小に強いため、1つのフォントデータのみで対応することが出来ます。

■ この間撮った写真をSVGで表現したい！

→ アンハッピー

ベクターグラフィックスは、図形情報を元に描画するため、写真のような複雑な構成や色使いをする図には向いていません。
写真の細かい色の違いや複雑な構成を表現するためにも、点単位で微妙な調整が効くビットマップグラフィックスの方が描画に向いています。

■ サイト内に載せるこのアイコンを複数デバイスに対応させたい！

→ ハッピー

一つの画像を複数デバイスで対応させる場合、ビットマップグラフィックスだと
解像度が異なる問題で、その分のビットマップデータを用意しなければならなくなってしまいます。

だったら高解像度で大きいサイズのビットマップデータを一つ作ってしまえば、
ある程度縮小しても平気だし、複数デバイスで使いまわせるんじゃないの？と思うかもしれません。
しかしそれだと、そんなに大きいサイズでなくても良い解像度のデバイスでもわざわざその画像を読み込まなくてはならないので、
大きいサイズの画像だと、その分ファイルの容量も大きくなってしまい、不必要にネットワーク負荷がかかってしまいます。
そのため、アイコンのように単純な図であれば、解像度を気にしなくて良いベクターグラフィックスの方が向いています。

いかがでしょうか？
ベクターグラフィックスとビットマップグラフィックスを使い分けられれば、いろいろと便利になると思います。

長くなってしまったので、今回はここまでにしておきます。
次回は実際にSVGを使ってみます。