ベクターグラフィックス

色のついたタイルを敷き詰める代わりに、点と点を結ぶゴムひもの設計図で絵を描く仕組みです。

定義 ベクターグラフィックス(Vector Graphics)とは、点や線、曲線といった幾何学的な図形の位置や形を「数式」として記録し、画像を描き出す方式のことです。画面を無数の色の点で埋めるビットマップ画像とは違い、どれだけ拡大・縮小しても輪郭がギザギザにならず、常にくっきりとした美しさを保てます。

モザイクタイルと建築設計図の違い

モザイク壁画にぐっと近づいて見ると、四角いタイルの一つひとつが見えて絵の輪郭がぼやけてしまいますよね。スマホで撮る写真や一般的な画像ファイル(ビットマップ)もこれと同じで、「ピクセル」と呼ばれる四角い色の点をぎっしり並べて作られたモザイク画なのです。そのため、写真を無理に拡大するとドットが目立ち、階段のようにギザギザに崩れてしまいます。

一方、ベクターグラフィックスはタイルを並べるのではなく、座標と数式で描かれた設計図のようなものです。コンピュータに対して「どこに何色の点があるか」を保存するのではなく、「この位置からあの位置まで、太さ2の青い曲線を引きなさい」という命令(計算式)を記録しておくのです。

そのおかげで、画像を10倍、100倍に拡大しても、コンピュータはその都度数式に基づいて滑らかな線を再計算して描画してくれます。スマホの小さな画面で見ても、ビルの外壁にかける超特大の垂れ幕に印刷しても、画質が落ちることなくいつでもくっきりとした鮮明さを保つことができます。

ビットマップとベクターの拡大比較 ラスター拡大 ジャギー(劣化) ベクタ拡大 滑らかな曲線を維持

ゴムひもを引っ張るように曲線を作る秘密

コンピュータの中で滑らかな曲線を数式で表現する際、最も広く使われているのが「ベジェ曲線(Bézier Curve)」です。始点と終点を決め、その間に磁石のような役割を果たす「制御点(コントロールポイント)」を置いて、線をぐっと引っ張る仕組みです。

この制御点の位置や向きをマウスで少し動かすだけで、曲線のしなり具合がリアルタイムで滑らかに変化します。デザイナーが描く自由な線や図形は、すべてこうした点の座標とハンドルの角度データとして記録されているのです。

この方式の大きなメリットは、データ容量が驚くほど軽いことです。何百万個もの複雑な色のタイルをいちいち記録する必要がなく、いくつかの基準点の座標と線の色情報だけを保存すればよいため、ファイルサイズが非常にコンパクトで済みます。

基準点とハンドルによるベジェ曲線の原理 制御ハンドル 制御ハンドル 開始基準点 終了基準点 ベジェ曲線

ロゴには最適、人物写真には不向き?

ベクターグラフィックスは、企業のロゴやアイコン、フォント(文字)のように、サイズを自由に変える必要があるデザインに最も力を発揮します。ウェブブラウザで画面を拡大しても、文字やアイコンが一切ボケずにきれいなままなのは、ベクター方式を採用しているからです。

ただし、あらゆる画像にベクターが適しているわけではありません。カメラで撮影した人の顔や夕焼け空のように、何万色もの色が繊細に混ざり合う風景を数式だけで表現しようとすると、計算が複雑になりすぎてコンピュータに大きな負荷がかかってしまいます。

もう少し正確に言うと、ベクター画像をディスプレイに表示するためには、最終的に画面のピクセルに合わせて色を塗り分ける「ラスタライズ(Rasterization)」という変換処理を行います。図形が複雑すぎるとリアルタイムの計算が追いつかなくなるため、実写写真はビットマップを使い、シンプルで輪郭のくっきりしたグラフィックにはベクターを使うのが一般的です。

🤔 よくある誤解

✕ 誤解

ベクター画像は、画面の解像度やディスプレイのピクセルとは完全に無関係にそのまま画面に表示される。

✓ 事実

保存形式自体は解像度に依存しませんが、私たちが目にするディスプレイ画面に表示する際は、最終的に画面のピクセルに合わせて色を配置する「ラスタライズ(変換処理)」を必ず経ています。

🧺 日常で出会う場面

1 画面を10倍に拡大しても文字の輪郭が滑らかなパソコン用フォント
2 名刺から超特大の屋外看板まで、サイズを自由に変えて印刷できる企業ロゴ
3 ウェブサイト上で画質が劣化せず、素早く表示されるSVGアイコン
💡 つまり ひとことで

ベクターグラフィックスは、ピクセルの代わりに数式と座標で画像を記録することで、どんなに拡大・縮小しても画質が崩れず鮮明さを保てる画像形式です。