ラスタ形式・ベクタ形式

情報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に代わって広く用いられるようになりつつある非可逆圧縮の画像形式です。