SVGファイルとは、画像のファイル形式の一つで、拡大しても画質が劣化しない画像です。
正式名称は Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）。
SVGファイルとは
SVGは普通の画像（PNGやJPEG）と違って、点の集まりではなく、数式で絵を描いている画像です。
画像形式の違い
| 形式 | 仕組み | 拡大 |
| PNG | 点（ピクセル） | ぼやける |
| JPG | 点（ピクセル） | ぼやける |
| SVG | 数式（ベクター） | ぼやけない |
SVGのイメージ
例えば円ならSVGではこう書きます
これは
中心 (50,50)
半径 40
色 赤
という命令で円を描いています。
つまりSVGは
画像 = プログラムで描いた絵 です。
SVGのメリット
メリット
拡大しても劣化しない
ファイルサイズが軽い
HTMLに直接書ける
CSSで色やアニメーション変更できる
ロゴ・アイコン・UIに最強
特にWebデザインではめちゃくちゃ使います。
SVGがよく使われるもの
ロゴ
アイコン
グラフ
地図
図形
UIパーツ
アニメーション
ゲームのエフェクト
PNGとSVG
| 画像 | 形式 |
| 写真 | JPG |
| イラスト | PNG |
| ロゴ | SVG |
| アイコン | SVG |
| 図形 | SVG |
| UI | SVG |
基本ルール
写真 → JPG
イラスト → PNG
ロゴ・図形 → SVG
画像の種類
ラスター画像（PNG JPG）
ベクター画像（SVG）
| 種類 | ファイル |
| ラスター | PNG JPG GIF |
| ベクター | SVG AI EPS |
SVG = 拡大しても劣化しない、数式で描かれた画像
