「SVG」とは？（Scalable Vector Graphics）

「SVG」は拡大縮小しても画質が変わらないベクター形式の画像です。
SVGファイルはテキスト形式でXMLで書かれており、メモ帳などで編集できます。
ウェブサイトのロゴやアイコン、様々な画面サイズに対応する必要があるデザインに適しています。

SVGは、テキスト形式の画像なので、生成AIとの相性もよいです。

1. SVGとは（拡大できる図形の設計図）

スマートフォンで画面を大きく拡大したとき、画像がぼやけてしまうことがあります。
だけど、ウェブサイトのロゴやアイコンの中には、どれだけ拡大してもくっきり見えるものがあるんだよね。
これって何が違うの？

ロゴやアイコンは、「SVG」というファイルがよく使われます。
「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で、名前の通り、拡大縮小しても画質が変わらない画像形式です。

SVGファイルの中身は実はテキストで書かれています。

つまり、メモ帳などのテキストエディタで開くと、中身を見たり編集したりできます。

SVGは「タグ」という特殊な構文に則って図形を表現しています。

ウェブページを作るときのHTMLや、プログラミング言語のLogoやProcessingに似ているね。

目次に戻る

1-1. SVGコードとXML

SVGファイルの実体は、ただのテキストファイル。
メモ帳などの簡単なプログラムでも開いて中身を見ることができます。

SVGは、XMLという「説明書き言語」で書かれていて、例えば、赤い円を描くSVGコードは次のようになります。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

この例では、幅100、高さ100の画像の中に、中心座標(50,50)、半径40の赤い円（circle）を描いています。

XMLは、データを整理された形で記述するための言語（表現形式）です。
コンピュータだけでなく、人間が読んでも理解できるように作られています。

もう少し複雑な例として、家の形を描いてみましょう。

<svg width="200" height="200">
  <rect x="50" y="100" width="100" height="100" fill="brown" />
  <polygon points="50,100 150,100 100,50" fill="red" />
</svg>

この家は、茶色の四角形（rect）と赤い三角形（polygon）を組み合わせて描かれています。

このようにSVGでは、基本的な図形を組み合わせて複雑な絵を作ることができます。

目次に戻る

2. ラスター画像とベクター画像

「スケーラブル」とは「拡大縮小できる」という意味です。

ウェブサイトのロゴやアイコンによく使われています。
印刷物でも活用されています。
名刺やパンフレットなど、さまざまなサイズで印刷する場合、SVGなら常に鮮明に印刷できます。

デジタルカメラで撮影した写真や、スマホで撮った画像は、ラスター形式で保存されています。
ラスター画像は、小さな色付きの点（ピクセル）を並べて絵を作る方式です。

ラスター画像は「点の集まり」なので、拡大するとそれぞれの点が大きくなります。
そのため、拡大すると画像がぼやけたり、モザイクのように粗く見えたりします。
一方、ベクター画像（SVGもその一種）は、点ではなく「図形の設計図」のようなものです。
拡大すると、この設計図に従って再計算して描画するので、どんなに大きくしても鮮明さを保てます。

SVGは、スマートフォンの小さな画面でも、大きなパソコン画面でも、同じように鮮明に表示できます。
また、ポスターのような大きなサイズでも、細部までくっきり表示できるのです。

ちなみに

SVGはアニメーションやインタラクティブな機能を持たせることもできます。
マウスを乗せると色が変わるボタンや、動きのあるグラフなどは、SVGで作られていることも多いです。

目次に戻る

3. 画像形式の選び方

用途によって、最適な画像形式は異なります。

SVGは、ウェブサイトのロゴやアイコンによく使われています。
印刷物でも活用されています。
名刺やパンフレットなど、さまざまなサイズで印刷する場合、SVGなら常に鮮明に印刷できます。

一方、写真や複雑な画像を扱う場合は、JPGやPNGなどが適しています。

将来的に拡大する可能性がある画像はSVGで作っておくと安心です。
例えば、小さく作ったロゴを後で大きなポスターに使いたい場合など、SVGなら問題なく拡大できます。

目次に戻る

3-1. 画像形式とファイルサイズ

BMPは最も単純なラスター画像形式です。
画像データをそのまま保存するため、高品質ですが非常に大きなファイルになります。
写真1枚で数十MBになることもあります。
JPGは写真に適した圧縮形式です。
データを圧縮して小さくするため、インターネットでの共有に向いています。
ただし、圧縮により画質が少し落ちるというデメリットがあります。
SVGは図形やロゴに最適な形式です。
シンプルな図形であればファイルサイズも小さくなります。
ただし、写真のような複雑な画像の表現には向いていません。