こんにちは！麗です！
今回は「SVG（ベクター形式）」について調べてみました。
きっかけは、AIにコードでイラストを描いてもらう練習をしようと思ったことです。
そのときにAIから「SVGで書きます！」と言われました。
……SVG？
画像？コード？何それ？
という状態でした。
今回は、開発初心者目線で「SVGとは何か」「ベクター形式とは何か」「PNGやJPGと何が違うのか」を整理してみます。
SVGとは？
SVGは、Scalable Vector Graphics の略です。
日本語にすると、 拡大・縮小できるベクター画像 という意味になります。
SVGは画像ファイルの一種です。 でも、PNGやJPGのような普通の画像とは少し違います。
SVGは、画像を「点の集まり」として保存するのではなく、 線・円・四角・座標・色などの情報で保存する画像形式です。
たとえば、
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="skyblue" /> </svg>
これはざっくり言うと、
- 100×100の描画エリアを作る
- 中心がこの位置の円を描く
- 半径は40
- 色は水色
という意味です。
ベクター形式とは？
SVGと合わせて出てくることが多いのが「ベクター形式」という言葉。
ベクター形式とは、画像を 線・図形・座標・数式の情報で表す形式 のことです。
たとえば、円の画像を保存するときに、
「この場所に、この大きさの円を、この色で描く」
という情報を持っています。
つまり、ベクター形式は画像の設計図みたいなもの。
完成した画像をそのまま保存しているというより、 「どう描くか」という情報を保存しているイメージです。
PNGやJPGとの違い
画像形式には、大きく分けて以下のような違いがあります。
| 形式 | 表し方 | 向いているもの |
|---|---|---|
| SVG | 線・図形・座標で表す | ロゴ、アイコン、図形、シンプルなイラスト |
| PNG | ピクセルの集まりで表す | スクショ、透過画像、UI画像 |
| JPG | ピクセルの集まりで表す | 写真、複雑な画像 |
PNGやJPGは、画像をピクセル（ちいさな点）の集まりで表します。
一方でSVGは、線や図形の情報で表します。
この違いによって、SVGには大きな特徴があります。
SVGは拡大してもぼやけにくい
SVGの大きなメリットは、拡大してもぼやけにくいことです。
PNGやJPGは、小さな点の集まりです。 そのため、小さい画像を無理に大きくすると、点が引き伸ばされてぼやけたりギザギザしたりします。
一方、SVGは「この線を引く」「この円を描く」という情報を持っています。 表示するサイズに合わせて描き直せるので、拡大してもきれいに見えやすいです。
ロゴやアイコンでSVGがよく使われるのは、この性質があるからみたいです。
SVGのメリット
SVGのメリットをまとめると、こんな感じです。
- 拡大・縮小してもきれい
- ロゴやアイコンに向いている
- 色やサイズをコードで変えやすい
- シンプルな図形ならファイルサイズが軽くなることがある
- AIにコードでイラストを描いてもらう練習にも使いやすい
特に今回の私のように、 「AIにコードでイラストを描いてもらいたい」 という場合、SVGはかなり相性が良さそうです。
なぜなら、SVGは画像でありながら、コードとして書けるからです。
AIに、
「丸を描いて」 「四角を追加して」 「背景色を変えて」 「線を太くして」
とお願いしながら、コードで見た目を調整できます。
これは、開発初心者が「コードで見た目が変わる感覚」をつかむ練習にもなりそうです。
SVGのデメリット・注意点
もちろん、SVGにも注意点があります。
写真のような画像には向いていない
SVGは、線や図形で表せるものに向いています。
ロゴ、アイコン、図形、シンプルなイラストには強いです。
でも、写真のように細かい色の変化がたくさんある画像にはあまり向いていません。 写真ならJPG、透過画像やスクショならPNGの方が向いていることが多いです。
複雑すぎるSVGは重くなることがある
SVGはシンプルな図形なら軽くなりやすいですが、 ものすごく複雑なイラストにすると、線やパスの情報が増えて重くなることがあります。
「SVGだから必ず軽い」というわけではないんですね。
外部から持ってきたSVGには注意
SVGは画像ですが、中身はコードのようなテキストです。 そのため、知らない場所から持ってきたSVGをそのまま使うときは少し注意が必要です。
自分で作ったSVGや、信頼できる素材を使うのが安心です。
まとめ
今回調べて分かったことは、SVGは コードで書ける画像形式 だということです。
そして、ベクター形式とは、画像をピクセルではなく、線・図形・座標などの情報で表す形式のことでした。
ざっくりまとめると、
- SVGはベクター形式の画像ファイル
- ベクター形式は画像の設計図のようなもの
- 拡大してもぼやけにくい
- ロゴやアイコンに向いている
- 写真や複雑すぎる画像には向いていないこともある
という感じです。
次にAIから「SVGで書きます！」と言われたら、
「あ、図形をコードで描いてくれるんだな」 と思えそうです。
