SVGとは｜ベクター画像の仕組み・PNGとの違い・拡大しても劣化しない理由

Webサイトのアイコンやロゴで、どれだけ拡大しても輪郭がギザギザにならず、くっきり表示される画像を見たことはないでしょうか。その多くがSVGです。一見ふつうの画像と同じように見えますが、内部の仕組みはPNGやJPGとはまったく異なります。本記事では、SVGとは何か、ラスター画像とどう違い、なぜ拡大しても劣化しないのかを順を追って解説します。

SVGとは何か

SVG（Scalable Vector Graphics、スケーラブル・ベクター・グラフィックス）とは、図形や線を数式（座標と命令）で表現するベクター画像のフォーマットです。W3Cによって標準化されており、現在の主要なWebブラウザはすべて標準でSVGの表示に対応しています。拡張子は「.svg」で、画像でありながら中身はテキストでできているのが大きな特徴です。

「ベクター」とは、点と点を結ぶ線や曲線、その塗りつぶしといった図形の設計図を保持する方式を指します。たとえば「中心(50,50)、半径40の円を青で塗る」という命令を持っておき、表示するときにその指示どおり描き直します。色のついた点（ピクセル）を並べて記録するのではなく、描き方そのものを記録するイメージです。

実際にSVGがどんな中身を持つのかは、SVG最適化ツールにファイルを読み込んでコードを眺めてみると分かりやすいでしょう。タグと数値の並びで図形が表現されていることが体感できます。

ラスター画像（PNG/JPG）との違い

SVGを理解するうえで欠かせないのが、ラスター画像との対比です。PNG・JPG・GIF・WebPといった、私たちが普段「画像」と呼ぶものの多くはラスター形式に分類されます。

ラスター画像は、画像を細かいマス目（ピクセル）に分け、それぞれに色を割り当てて記録します。写真のように色が複雑に変化する絵柄を表現するのに優れていますが、解像度がはじめから決まっているため、もとのサイズを超えて拡大すると1つ1つのマス目が引き伸ばされ、輪郭がぼやけたりギザギザになったりします。

一方のSVGは図形の設計図を持っているだけなので、表示サイズに合わせてその都度なめらかに描き直せます。ただし、写真のように無数の色が入り混じる絵柄は図形で表現しきれないため、SVGには不向きです。用途に応じてベクターとラスターを使い分けるのが基本です。

なぜ拡大しても劣化しないのか

SVGが拡大に強い理由は、画像を「点の集まり」ではなく「描き方の指示」として持っていることにあります。ラスター画像は記録した時点でピクセル数が固定されますが、SVGは「半径40の円」という指示を保持しているだけなので、2倍に表示するなら「半径80の円」として計算し直して描けばよいのです。

この「サイズに応じて描き直せる」性質こそが、SVGの名前にあるScalable（スケーラブル＝拡大縮小しても破綻しない）の意味です。名刺サイズのロゴをそのまま巨大な看板に使っても、輪郭は常になめらかなまま保たれます。

• 解像度に依存しない：高精細なディスプレイ（Retinaなど）でも常にくっきり表示されます。
• 1ファイルで何サイズにも対応：大・中・小と複数の画像を用意する必要がありません。
• 縮小しても破綻しない：小さく表示しても線がつぶれにくく設計できます。

つまりSVGは、表示するたびに最適な解像度で描画されるため、原理的に「拡大による劣化」という概念が存在しないのです。

XMLベースのテキスト形式という特徴

SVGのもう一つの大きな特徴は、その中身がXMLというテキスト形式で書かれていることです。バイナリの塊であるPNGやJPGと違い、SVGファイルはテキストエディタで開いて中身を読んだり、書き換えたりできます。

<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue" /></svg>

上の短いコードは「100×100の領域に、中心(50,50)・半径40の青い円を描く」という意味です。このように人間が読める形で図形が定義されているため、SVGには次のような利点が生まれます。

• コードで直接編集できる：色（fill）やサイズ、座標をテキストとして書き換えるだけで見た目を変えられます。
• CSSやJavaScriptで操作できる：HTMLに直接埋め込めば、Webページの要素と同じように色を変えたりアニメーションさせたりできます。
• 検索や差分管理に強い：テキストなのでGitなどで変更履歴を管理しやすく、何が変わったか追いやすい形式です。

テキストであるという性質は、デザインとコードの境界を曖昧にし、SVGを「画像」と「プログラムで扱える素材」の両方として使えるものにしています。なお、SVGをラスター画像として書き出したい場合はSVG→PNG変換ツールを使えば、好きな解像度のPNGに変換できます。

アイコンやロゴに向く理由と使いどころ

SVGが特に力を発揮するのは、シンプルな図形でできた絵柄です。中でもアイコンとロゴはSVGの典型的な活躍の場です。

1. アイコン

UIに並ぶアイコンは、どんな画面サイズ・解像度でもくっきり表示される必要があります。SVGなら1つのファイルがあらゆる表示サイズに対応でき、CSSで色をその場で変えられるため、ダークモード対応やホバー時の色変化も簡単です。多数のアイコンをまとめて扱う「SVGスプライト」という手法も広く使われています。

2. ロゴ

企業やサービスのロゴは、Webサイトの小さなヘッダーから巨大な印刷物まで、あらゆるサイズで使われます。SVGならサイズごとに画像を作り直す必要がなく、どこで使っても劣化しません。ブランドの一貫した見た目を保つうえで、ベクター形式は理想的です。

3. 図表・イラスト

グラフ、地図、フラットなイラストなど、面と線で構成された絵柄もSVGの得意分野です。逆に、写真や写実的なグラデーションが主体の画像はラスター形式（JPGやWebP）のほうが適しています。

ファイルサイズ・最適化とWebでの使い方

SVGは絵柄が単純であればファイルサイズが非常に小さくなり、ページの表示も速くなります。ただし、デザインツールから書き出したSVGには、編集用の不要なメタデータや冗長な小数、使われていない定義などが含まれがちで、そのままだとサイズが膨らんでしまうことがあります。

そこで役立つのが最適化です。見た目を保ったまま不要なコードを削り、小数の桁を丸めるだけで、ファイルサイズを大きく減らせる場合があります。SVG最適化ツールを使えば、ブラウザ上で手軽に余分なコードを取り除き、軽量なSVGに整えられます。

Webでの主な使い方は次のとおりです。

• img要素で読み込む：<img src="logo.svg"> のように、通常の画像と同じく手軽に表示できます。
• HTMLに直接埋め込む：SVGコードをそのままHTMLに書くと、CSSやJavaScriptで色やアニメーションを制御できます。
• CSSの背景画像にする：装飾的なアイコンなどはbackground-imageとして使うこともできます。

SVGは、数式で図形を表すという発想によって、拡大しても劣化せず、テキストとして自在に扱える柔軟な画像形式です。まずはSVG最適化ツールで手持ちのSVGの中身を覗いてサイズを整え、必要に応じてSVG→PNG変換ツールでラスター画像に書き出してみてください。仕組みを目で見て触れることが、理解への近道です。

なお本記事は一般的な情報の提供を目的としたものです。実際の制作で最適なファイル形式や最適化の方針は、用途・表示環境・ブランド要件によって変わります。最新の公式情報を確認のうえ判断してください。