ラスタ画像とベクタ画像

同じ図形をラスタ画像（Canvas）とベクタ画像（SVG）で描き、拡大時の見え方の違いを比較します。ホイールで拡大縮小、ドラッグで移動、クリックで注目位置を切り替えられます。

• ラスタ画像（Canvas）: 拡大するとピクセル単位のブロックが見え、境界グリッドも表示されます。
• ベクタ画像（SVG）: 図形の数式情報を拡大表示するため、拡大しても輪郭が滑らかです。
• ファイルサイズの比較: 同じ絵を PNG と SVG で書き出して大きさを比べます。ベクタは書き出す大きさを変えてもサイズが変わりません。いっぽう写真のように画素ごとに色が違う絵をベクタで表すと、四角形を画素の数だけ並べることになり、かえって大きくなります。

ラスタ画像とは、小さな点（ピクセル）の集まりとして画像を表す方式です。写真のような連続的な色の表現に向いていますが、拡大しすぎるとピクセルが目立ち、ギザギザに見えやすくなります。

ベクタ画像とは、線や円、文字などを数式（図形情報）として表す方式です。ロゴや図、アイコンのような形のはっきりした画像に向いており、拡大・縮小しても輪郭がなめらかで、解像度の影響を受けにくいです。