ラスタ形式・ベクタ形式

情報Iの学習指導要領解説に「静止画を点の集まりとして扱うラスタ形式と座標として扱うベクタ形式」という記述があるので、情報Iの教科書の多くがこれらの用語を扱っています。「ラスタ」でなく「ラスター」という表記にしたり、あるいは「ビットマップ」という用語も挙げていたり、「ベクタ」でなく「ベクター」という表記にしたりしているものもあります。

ラスタ形式の例としてはPNG、JPEG、GIFなど、お馴染みの例が挙げられているのですが、ベクタ形式についてはあまり馴染みのある例が挙げられていないようです。

次の三つの黄色い丸をご覧ください。

最初の黄色い丸はSVGという形式のベクタ画像です。ブラウザの表示を拡大してもギザギザになりません。2番目のものはPNG形式、3番目のものはWebP形式で、どちらもラスタ画像です。

最初のSVG画像は、単なるテキストファイルで、中には

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
  <circle cx="25" cy="25" r="22" fill="yellow" stroke="black" stroke-width="2" />
</svg>

と書き込んであります。このようにテキストで簡単に描けるのもSVGの特徴です。

本格的にSVG画像を描きたいなら、Adobe IllustratorやAffinity Designer、あるいはオープンソースの Inkscape（インクスケープ）が便利です。

Pythonのmatplotlibなどで描くグラフも、今はSVG形式で保存するのがお勧めです。グラフを描いた後で

plt.savefig("filename.svg", bbox_inches="tight")

と打ち込めば、filename.svg というSVG形式の画像ファイルに保存できます。

ちなみに、上の3番目の例のWebP（ウェッピー）という形式は、JPEGに代わって広く用いられるようになりつつある非可逆圧縮の画像形式です。

上の黄色い丸の絵は、SVGが167バイト、PNGが2492バイト、WebPが2744バイトです。ラスタ画像よりベクトル画像のほうがデータ量が少ないように見えます。

どんな場合にもラスタ画像よりベクトル画像のほうがデータ量が少ないのでしょうか。

下の例はCreative CommonsのDownloadsページにあるCC BYを表すSVG画像と、それをImageMagickで変換した同じ大きさ（120x42）のGIF画像です。

SVGが10236バイト、GIFが1402バイトで、GIFのほうがずっと小さいことがわかります。

必ずしもベクタ画像のほうが小さいというわけではないことがわかります。ベクタ画像は作り方によってサイズが大きく変わり、うまく作ればもっと小さくできるとは思いますが、概して複雑な図形ほどラスタ画像のほうが有利です。