これまで紹介してきた色のついた小さな点の集まりで構成される画像のことを「ラスタ画像(raster image)」と呼びます。
それに対し、例えばワープロなどで見ることができる複数の図形を組み合わせて作成された画像のことを「ベクタ画像(vector image)」と呼びます。
ベクタ画像は画像を構成する様々な図形(長方形、楕円、直線、曲線など)の座標(位置や大きさ)や属性(枠線の形や色、塗りつぶしの色やパターンなど)を記述することで画像を表現します。
例えば下記の左の家の形をしたベクタ画像は「三角形1つ」、「長方形6つ」、「円1つ」の8つの図形を組み合わせたものです。
右にこの画像を拡大して表示することができますが、ベクタ画像の場合、図形の形を元に描画しているため、どれだけ拡大してもラスタ画像のように点の形が目立って表示されることはありません。たとえば、ドアのノブの部分の黒い円はどれだけ拡大しても滑らかな円の形で表示されます。
マウスを左の画像の上で移動することで、右に拡大して表示する部分を変更することができます。
(右に表示される部分が黒い枠で表示されます)
左の画像の上でマウスのホイールボタンを回転することで右の部分の拡大の倍率を変更することができます。
下のズーム倍率のスライダーを変更することで右の部分の拡大の倍率を変更することができます。
ズーム倍率(2〜20) 10倍
ベクタ画像では、描画する図形ごとに「図形の種類」、「図形の大きさと位置」、「図形の属性」の3つのデータを保存します。
例えば「辺の長さが20ドットの正方形で、枠の幅が2ドット、枠の色が黒、塗りつぶしの色が白」の図形を「長方形の左上の点が原点」の位置に描画する場合、ベクタ画像では以下のように記述できます。
図形の種類:長方形
左上の点の座標:(0,0)
図形の幅:20
図形の高さ:20
枠の幅:2
枠の色:黒
塗りつぶしの色:白
上記の情報は文字データなので、一文字を2バイトとして計算すると全部で56文字なので合計112バイトのデータで表現できます。
同じ形の画像を3バイトのRGBカラー画像で表現した場合は 20 * 20 * 3 = 1200 バイト必要です。
(上記の記述例はやデータサイズの計算はわかりやすさを重視しており、実際に使われるベクタ画像の形式とは異なります)
ベクタ画像を記述する形式には様々な種類がありますが、そのうちの一つにsvg (scalable vector graphics)と呼ばれる形式があり、ウェブブラウザでも表示することができます。
こちらに svg 形式で記述された蝶の画像があります。このページを開き、画像を拡大、縮小(Ctrlキーを押しながらマウスのホイールボタンを回転することで拡大縮小できます)してみて下さい。拡大しても蝶の形が綺麗に表示されることが確認できるはずです。
また、この蝶が実際にどのように記述されているかを知るには画像の上でマウスの右ボタンをクリックし、「ページのソースを表示」を選択して下さい。
path と書かれている行の右に大量に書かれている数字がこの蝶の輪郭を現す座標などのデータを表します。
この画像のサイズは約 400 x 250 ドットで svg のファイルサイズは 46,829 バイトです。
この画像を3バイトのRGBカラー形式で表現した場合は、400 * 250 * 3 = 300,000 バイト 必要です。