ベクター画像

ベクター画像は、点 (アンカーポイント)、線 (パス)、曲線 (ベジェ曲線)、塗り (フィル) といった数学的なオブジェクトの集合として画像を記述する形式である。ラスター画像がピクセルの集合であるのに対し、ベクター画像は描画命令の集合であるため、任意の倍率に拡大・縮小しても画質が劣化しない。企業ロゴ、アイコン、地図、テクニカルイラストなど、明確な輪郭を持つグラフィックに最適な形式である。

• 解像度非依存: ベクター画像はレンダリング時に出力デバイスの解像度に合わせて再計算されるため、スマートフォンの画面 (326 PPI) から大判ポスター (数メートル四方) まで同一ファイルで対応できる。ラスター画像のように「Web 用」「印刷用」と複数サイズを書き出す必要がない
• ファイルサイズの特性: 単純な図形であればラスター画像より遥かに小さいファイルサイズで表現できる。たとえば 5 色のフラットなロゴは SVG で 2-3KB 程度だが、同等の PNG は 50KB 以上になることがある。ただし、複雑なグラデーションメッシュや数万のパスを含むイラストではサイズが増大し、ラスターの方が効率的になる場合もある
• 主要フォーマット: Web では SVG (Scalable Vector Graphics) が標準で、XML ベースのためテキストエディタで直接編集できる。印刷業界では AI (Adobe Illustrator)、EPS、PDF が広く使われ、フォントのアウトライン化やカラープロファイルの埋め込みに対応する

Web 開発において SVG はインラインで HTML に埋め込むことができ、CSS でスタイルを変更したり JavaScript でアニメーションを制御したりできる。<path> 要素の d 属性にはベジェ曲線の制御点が記述されており、stroke-dasharray と stroke-dashoffset を組み合わせた線描アニメーションや、D3.js によるデータビジュアライゼーションなど、インタラクティブな表現に広く活用されている。