「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

ベクター画像

pointこの用語のポイント

point画像だよ

point点と点を線で結ぶことで作られているよ

point拡大してもカクカクしないよ

スポンサーリンク

簡単に書くよ

ベクター画像(読:ベクターガゾウ 英:vector image)とは

画像の分類のひとつ
であり

線を引いて作る形式の画像のこと
です。


image piyo

詳しく書くよ

順番に見ていきましょう。
まずは予備知識として「ベクター形式」について簡単に説明します。
「そんなの説明されなくても知ってるよ!」な人は適当に読み飛ばしてください。

コンピュータさんの世界では、画面や画像は、すべて点描画です。
一見すると絵に見えても実際には点の集まりなのです。

ベクター画像

画像や文字の形式は、データ形式に注目して分類すると

1.データを「座標と色」で覚えておく形式
2.データを「向きや長さ」で覚えておく形式


のどちらかに分類できます。

1.データを「座標と色」で覚えておく形式

は「塗り絵方式」です。
「このマス目に黒を置いて、このマス目に赤を置いて……」のような形で内容を覚えておきます。

ベクター画像2

もう一方の

2.データを「向きや長さ」で覚えておく形式

は「お習字方式」です。
「この位置からこの位置に線を引いて……」のような形で内容を覚えておきます。

ベクター画像3

この2つの形式のうち

2.データを「向きや長さ」で覚えておく形式

を「ベクター形式」と言います。

ベクター画像4

以上を踏まえて

お習字方式(ベクター形式)の画像

が「ベクター画像」です。
ベクター画像は「この位置からこの位置に線を引いて……」のような形で内容を覚えている画像です。

ベクター画像5

ベクター画像は拡大してもギザギザにならない画像です。
ベクター画像は、例えば「点Pから半径1cmの円を描く」のような形で情報を覚えています。
2倍の大きさに拡大しても「点Pから半径2cmの円を描く」に変わるだけなので拡大(縮小)の影響を受けにくいのです。

ベクター画像6

その代わり、複雑な見た目の画像を表示するのが大変です。
ファイルサイズも大きくなります。

ベクター画像7

例えば、円の画像が あったとしましょう。

ベクター画像8

この画像の情報が「点Pから半径1cmの円を描く」だったとします。
そうすると、実際に画像を表示するときは「点Pから半径1cmの円を描く」の作業が発生します。

おっと、二重丸の画像もありました。

ベクター画像9

この画像の情報は、例えば「点Pから半径1cmの円を描く」「点Pから半径2cmの円を描く」のようになります。
円を描くという作業を2回やるわけです。
そうすると、実際に画像を表示するときは「点Pから半径1cmの円を描く」の作業と「点Pから半径2cmの円を描く」の作業が発生します。

さて、ここで2つの画像を比べてみましょう。

円の画像の情報は

1.点Pから半径1cmの円を描く

です。
それに対して、二重丸の画像の情報は

1.点Pから半径1cmの円を描く
2.点Pから半径2cmの円を描く


です。
何となくですが、情報量が2倍になっていますよね。
それに伴いファイルサイズも2倍……まではいかないかもしれませんが大きくなります。

また、円の画像を表示するときにやる作業は

1.点Pから半径1cmの円を描く

です。
それに対して、二重丸の画像を表示するときにやる作業は

1.点Pから半径1cmの円を描く
2.点Pから半径2cmの円を描く


です。
何となくですが、作業量が2倍になっていますよね。

以上でベクター画像の説明は終わりですが、せっかくなので「ラスタ画像」にも触れておきます。
余裕がある方は頑張って読んであげてください。
脳みそから煙が出そうな人は無理する必要ありません。
ゆっくり休んでください。

休め

あっ、読んでくださるのですね。
ありがとうございます。

それでは、いってみましょう。

先ほど、画像や文字の形式は、

1.データを「座標と色」で覚えておく形式
2.データを「向きや長さ」で覚えておく形式


のどちらかに分類できると書きました。

ベクター画像10

この2つの形式のうち

1.データを「座標と色」で覚えておく形式

を「ラスタ形式」と言います。

ベクター画像11

それを踏まえて、ラスタ形式の画像が「ラスタ画像」です。
ラスタ画像は「このマス目に黒を置いて、このマス目に赤を置いて……」のような形で内容を覚えている画像です。

ベクター画像12

ラスタ画像は拡大するとギザギザになる画像です。
2倍の大きさに拡大すると、マス目の大きさも2倍になりますからね。
曲線の部分とかがギザギザになります。

ベクター画像13

その代わり、複雑な見た目の画像でも単純な画像と同じように表示できます。
マス目が100個であれば、持っている情報はマス目100個分です。
表示内容の複雑さは関係ありません。

ベクター画像14

そのような特徴があります。

気が向いたら、セットで覚えてあげてください。

■ベクター画像
・データを「向きや長さ」で覚えておく形式
・拡大してもギザギザにならない
・複雑な見た目は少し苦手

■ラスタ画像
・データを「座標と色」で覚えておく形式
・拡大するとギザギザになる
・複雑な見た目でもバッチ来い!


です。


image piyo2

一言でまとめるよ

まぁ「ベクター画像」って単語が出てきたら「線を引いて作った画像なんだな~」と お考えください。

一番上に戻るよ
スポンサーリンク
書籍画像048
書籍画像013

おまけ

■訳してみるよ

「vector(ベクター)」の意味は「ベクトル」とか「方向と大きさを持つ量」とか「軌道」とか「進路」とか「媒介生物」とかです。
「画像」は日本語ですね。
何となく くっつけると

ベクトル(方向と大きさを持つ量)の画像

となります。


■検索してみる?




書籍画像
わわわ説明術コラム
宣伝だよ
「分かった!」と思わせる説明の技術 知識ゼロの相手にも伝わるようになる本
7日間でハッキングをはじめる本 TryHackMeを使って身体で覚える攻撃手法と脆弱性
クイズで学ぶUIデザイン ユーザビリティの基本が身につく50問