SVG
読み: エスブイジー
XML ベースのベクター画像形式。解像度に依存せず拡大・縮小しても劣化しないため、アイコンやロゴ、チャートに最適である。
SVG (Scalable Vector Graphics) は、W3C が策定した XML ベースの 2D ベクターグラフィックス記述言語である。ラスター画像がピクセルの集合で構成されるのに対し、SVG は数学的な座標とパス情報で図形を定義するため、どのような解像度やサイズで表示しても輪郭が滑らかなまま保たれる。
テキストエディタで直接編集可能な XML 構造を持ち、CSS によるスタイリングや JavaScript によるインタラクション制御が可能である。DOM の一部として扱えるため、Web アプリケーションとの親和性が極めて高い。React や Vue などのフレームワークではコンポーネントとして SVG を直接インポートし、props で色やサイズを動的に制御する手法が一般的である。
- パス要素:
<path d="M10 10 L90 90">のように座標を記述し、直線・曲線・円弧を自在に表現する - フィルターとグラデーション: ぼかし、ドロップシャドウ、線形・放射グラデーションを XML 内で宣言的に定義できる
- アニメーション: SMIL アニメーションや CSS アニメーションでモーションを付与し、軽量なアニメーションを実現する
ファイルサイズはパスの複雑さに比例するため、写真のような複雑な画像には不向きである。アイコン、ロゴ、チャート、地図など幾何学的な図形の表現に真価を発揮する。gzip 圧縮 (.svgz) を適用すれば転送サイズをさらに 60-80% 削減でき、SVGO などの最適化ツールで不要なメタデータを除去すれば追加で 30-50% の削減も見込める。