SVG（Scalable Vector Graphics）

SVG（Scalable Vector Graphics）とは、点や線の座標を数式として記述する、ベクター形式の画像ファイルのことです。文字と同じようにテキストデータとして書かれており、Webサイトのアイコンやロゴなど、拡大縮小が多い場面で広く使われています。

現実世界に例えると、SVGは「ここからここまで直線を引く」という設計図の指示書のようなものです。指示書の縮尺を変えても内容自体は変わらないため、大きな紙に描き直しても線はきれいなまま再現できます。

SVGの中身はテキストデータ

SVGファイルの正体は、XMLという形式で書かれた、人が読んでも意味の分かるテキストデータです。画像でありながらメモ帳などのテキストエディタで開いて中身を確認したり、直接書き換えたりできる点が、写真のような画像形式とは大きく異なります。

SVGは、「点Aから点Bまで、このカーブで結ぶ」といった数式の情報を保持しているため、表示するサイズが変わるたびに、その都度あらためて線や曲線を計算し直して描き出します。スマートフォンから大画面まで、同じファイルで対応できる点が強みです。

単純な図形やロゴであれば、座標情報だけで表現できるため、同じ見た目のラスター画像よりファイルサイズが小さくなることが多くあります。ページの表示速度を意識するWebサイトで、アイコンにSVGが好まれる理由のひとつです。

SVGはテキストデータであることを活かし、CSSで色や太さを変更したり、JavaScriptで動きを付けたりすることができます。マウスを重ねた時に色が変わるアイコンや、簡単なアニメーションを実装する場面でよく利用されています。

SVGは、ナビゲーションのアイコン、企業のロゴ、グラフや図解のイラストなど、輪郭のはっきりした要素で幅広く使われています。画面サイズの異なる端末が混在する現在のWeb制作において、標準的な選択肢のひとつになっています。

一方で、光や色の微妙なグラデーションを含む写真のような画像は、SVGでの表現には向いていません。無数の色の違いを数式だけで再現するのは非効率なため、写真は従来どおりJPEGなどのラスター画像として扱うのが一般的です。

SVGは中身がテキストであるがゆえに、悪意のあるコードを埋め込まれるリスクも指摘されており、外部から受け取ったSVGファイルの扱いには注意が必要です。CMSなどでは、アップロードを制限している場合もあります。