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