SVG（エスブイジー）は、拡大しても画質が落ちない画像フォーマットです。この記事では、WEBデザイナーが知っておきたいSVGの基本をまとめました。
SVGとは？
SVGは、輪郭がぼやけることなく滑らかなまま拡大できる「ベクター画像」です。
- SVGは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略
- 点や線の位置を数値で記録し、表示するときに計算して描くベクター画像
- W3Cが仕様を定めたWEBの標準フォーマット
- SVGの中身はテキスト（XML）で表示するたびに計算して描き直す
- 「この座標からこの座標へ線を引く」「半径◯◯の円を描く」のような指示が書かれている
- 解像度に依存しない
- SVGは、輪郭がはっきりした図形（ロゴ・アイコン・線画イラストなど）に向いている
従来の画像（PNG・JPEG）との違い
従来の画像（PNGやJPEG）は「ラスター画像」といい、細かい点（ピクセル）を並べて色を記録しているため、拡大すると点が引き伸ばされて輪郭がぼやけます。
| 項目 | SVG（ベクター） | PNG・JPEG（ラスター） |
|---|---|---|
| 記録の仕方 | 図形を数値（座標）で持つ | 色の点（ピクセル）を並べる |
| 向いている画像 | ロゴ・アイコン・線画 | 写真・グラデーションの多い絵 |
| ファイルの中身 | テキスト（XML） | 圧縮されたデータ |
SVGファイルを作る方法
SVGを作る方法は以下の2通りあります。
1. デザインツールから書き出す
Illustrator、Figma、Inkscape などのデザインツールで図形を作り、SVG形式で書き出します。
2. コードで直接書く
SVGの中身はテキストなので、コードで直接書くことができます。（後述）
WEBサイトでSVGを表示する方法
作成したSVGファイルをHTMLで指定する方法は、以下の2通りです。
1. SVGのパスを指定する
SVGのファイルパスを、従来の画像と同じように<img>やCSSのbackground-imageで指定して、ブラウザで表示します。
<img src="/img/aaa.svg" alt="サイトロゴ" width="120" height="40">
.icon {
background-image: url("/img/aaa.svg");
}
2. SVGのコードを直接HTMLに書く（インラインSVG）
SVGのコードを、HTMLの中にそのまま書いて、ブラウザで表示します。色や線のスタイルをCSSで変更できます。
<svg width="40" height="40" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="9" />
</svg>
以下に描画した「円」は、このページに直接書いたインラインSVGです。
<figure>
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-label="インラインSVGで描いた円">
<circle cx="12" cy="12" r="9" />
</svg>
</figure>
よくある質問（FAQ）
Q. SVGとPNG・JPEGはどう使い分けますか？
ロゴ・アイコン・図解などの輪郭がはっきりした絵はSVGが向いており、写真や色数の多い絵はPNGやJPEGを使います。
Q. SVGは古いブラウザでも表示できますか？
今の主要なブラウザ（Chrome・Safari・Edge・Firefox）はすべて対応しています。
Q. SVGは自分でコードを書く必要がありますか？
IllustratorやFigmaなどのデザインツールで作った図形を、SVG形式で書き出せば、コードを書く必要はありません。SVGの中身はテキストなので、書き出したあとに手直しすることもできます。