ベクター画像
読み: べくたーがぞう
数学的な座標 / 曲線 / 塗りの情報で図形を定義する画像形式。拡大縮小しても画質が劣化しない特性を持つ。
ベクター画像は、点 (アンカーポイント)、線 (パス)、曲線 (ベジェ曲線)、塗り (フィル) といった数学的なオブジェクトの集合として画像を記述する形式である。ラスター画像がピクセルの集合であるのに対し、ベクター画像は描画命令の集合であるため、パスで描いた図形の輪郭は任意の倍率に拡大または縮小しても滑らかなまま保たれる。企業ロゴ、アイコン、地図、テクニカルイラストなど、明確な輪郭を持つグラフィックに向く。
- 解像度非依存: ベクター画像はレンダリング時に出力デバイスの解像度に合わせて再計算されるため、スマートフォンの画面から大判ポスター (数メートル四方) まで同一ファイルで対応できる。ラスター画像のように「Web 用」「印刷用」と複数サイズを書き出す必要がない
- ファイルサイズの特性: 単純な図形であればラスター画像より小さいファイルサイズで表現できる。ただし、複雑なグラデーションメッシュや数万のパスを含むイラストではサイズが増大し、ラスターの方が効率的になる場合もある
- 主要フォーマット: Web では
SVG(Scalable Vector Graphics) が標準で、XML ベースのためテキストエディターで直接編集できる。印刷で使われる形式には AI (Adobe Illustrator)、EPS、PDF などがあり、フォントのアウトライン化やカラープロファイルの埋め込みに対応する
Web 開発において SVG はインラインで HTML に埋め込むことができ、CSS でスタイルを変更したり JavaScript でアニメーションを制御したりできる。<path> 要素の d 属性にはベジェ曲線の制御点などが記述されており、stroke-dasharray と stroke-dashoffset を組み合わせた線描アニメーションや、D3.js によるデータビジュアライゼーションなど、インタラクティブな表現に使われる。