SVGとは？鮮明なグラフィックのためのベクターフォーマット

SVGはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、 毎日目にする画像フォーマットの中でも異彩を放つ存在です。JPEG、PNG、WebP、GIFはいずれも 固定されたピクセルの格子を保存します。しかしSVGが保存するのはまったく別のもの — 画像を描くための命令の集まりです。この一点の違いこそが、同じ1つのファイルで SVGロゴがスマートウォッチでも屋外の大型看板でも鮮明に見える理由であり、 よく作られたアイコンセットが写真のサムネイル1枚より軽くなり得る理由です。

ピクセルではなく数式でできた絵

SVGファイルはXMLで書かれたプレーンテキストです。コードエディタで開くと、 図形を記述する読みやすいタグが並んでいます — 中心と半径を持つ<circle>、 曲線をたどる<path>、塗り色を指定した<rect>といった具合です。 ブラウザはこれらの命令を読み取り、毎回図形を新たに描き起こします。 画面に現れるその瞬間まで、何一つピクセルとしては保存されていません。

これが「ベクター」の意味です。絵が固定されたピクセル格子ではなく座標と曲線で定義されるため、解像度に依存しません。1000%に拡大しても、 ブラウザは同じ曲線をより大きなサイズで計算し直すだけです。ぼやけることも、 斜めのエッジに階段状のギザギザが出ることも、品質が落ちることも一切ありません — 決して。 一方でラスター画像は決まった数のピクセルしか持たないため、拡大するとわずかな情報を 無理に引き伸ばすことになります。拡大したPNGが甘くカクカクして見えるのはこのためです。

SVGが真価を発揮する場面

• ロゴとブランドマーク — 1つのファイルでファビコン、ヘッダー、印刷向けの大型ビジュアルまで、 決してぼやけることなくこなします。
• アイコン — UIのアイコンシステム（メニュー、検索、カート、山形マーク）は小さく鮮明で、 周囲のテキストから色を受け継ぐこともできます。
• イラストとラインアート — エッジのくっきりしたフラットな、幾何学的な、あるいは手描きのベクターアート。
• チャートと図表 — データ可視化はどんな拡大率でも読みやすさを保ち、 マークアップ内の数値を編集するだけで更新できます。

こうしたフラットで幾何学的なグラフィックでは、SVGファイルはたいていとても小さくなります。PNGで30 KBのロゴがSVGなら3 KBになることもあります。 何万もの色付きピクセルではなく、ほんの一握りの図形定義を保存しているからです。 バイト数が少ないということは、ページの表示がそれだけ速くなるということです。

編集でき、スタイリングでき、アニメーションできる

SVGはただのマークアップなので、グラフィックとしては異例なほど柔軟です。次のことができます：

• コードで編集する。テキストエディタで16進数の色を変えたり、座標を少し動かしたり、線の太さを調整したり — デザインツールは一切不要です。
• CSSでスタイリングする。SVGをHTMLにインラインで埋め込むと、その図形はDOMの一部になります。塗りと線の色を指定し、 ホバー状態を適用し、CSSルール1つでアイコンの色をダークモードに合わせて切り替えることさえできます。
• CSSやJavaScriptでアニメーションさせる。パスを描き進めたり、図形をモーフィングさせたり、ローダーを回転させたり — すべてネイティブに、動画ファイルや重いアニメーションライブラリなしで実現できます。

インターフェースデザイナーが絶えずSVGに手を伸ばすのはこのためです。 アイコンは固定された絵ではなく、色を塗り替えたり動かしたりできる生きたマークアップなのです。

普遍的なサポート

Chrome、Safari、Firefox、Edgeといったすべての現代的なブラウザは、10年以上前からSVGを ネイティブでレンダリングしてきました。SVGは<img>タグに入れたり、 CSSのbackground-imageにしたり、HTMLに直接インラインで埋め込んだりできます。 2026年現在、一般的なウェブ用途ではプラグインもポリフィルも互換性の心配も不要です。

SVGが不適切な選択となる場合

SVGはラスターフォーマットを何にでも置き換えられる万能フォーマットではなく、 用途を間違えると手ひどく裏目に出ます。最も分かりやすい例が写真です。 写真は数百万のピクセルからなり、その一つひとつがわずかに異なる色合いを持ち、 きれいに記述できる幾何学的な図形がありません。人の顔や森の風景を再現できるような コンパクトな曲線の集合など存在しないのです。写真を無理に「ベクター化」しようとすると、 手に負えないほど巨大なファイルになるか、実際のディテールをすべて失った にじんでポスタライズされた漫画になってしまいます。

写真をはじめとする連続階調の画像には、ラスターフォーマットが適した道具です — 一般的な写真にはJPEG、より高い圧縮が必要ならWebP/AVIFです。 写真があるならベクター化するのではなくラスター化するのです。SVGの得意分野は フラットで幾何学的な、色数の少ないグラフィックであり、画像が本当に写真的な性質を帯びた瞬間から 役に立たなくなります。

ロゴにおけるSVG vs PNG、ひと目で

より詳しい対比は SVG vs PNG：どちらのフォーマットを使うべきかをご覧ください。

知っておく価値のあるセキュリティの話

柔軟さには裏の面があります。SVGは実行可能なXMLなので、悪意あるファイルは<script>タグやイベントハンドラを埋め込み、 画像がブラウザにインラインで開かれた際にJavaScriptを実行させることができます。 そのため信頼できないSVGは本物の攻撃ベクターになります — たとえば見知らぬ人がアップロードしたSVGを自分のサイトにインラインでレンダリングする場合です。 対策は単純明快です。信頼できない出所のSVGはサニタイズする（スクリプト、イベントハンドラ、外部参照を取り除く）か、 ユーザーが提供したSVGをインライン化せず通常の画像ファイルとして配信しましょう。 自分で作成したSVGはまったく安全です。

SVG vs アイコンフォント

インラインSVGが手軽になる前は、多くのサイトがアイコンをカスタムフォントとして配信していました （各グリフが1つのアイコン）。アイコンフォントも今なお機能しますが、 主流はほぼインラインSVGへと移りました。SVGアイコンはより鮮明で （フォントは小さいサイズでヒンティングが妙にかかることがあります）、 1つのアイコンに複数の色を使え、アクセシビリティに優れ、 グリフ1つを表示するためにフォントファイル全体をダウンロードさせることもありません。 新規プロジェクトなら、インラインSVGのアイコンシステムが現代的な既定の選択です。

SVGファイルを軽く保つ

デザインツールから書き出されたSVGは、エディタのメタデータ、隠しレイヤー、過剰な小数の精度、 コメントなどで肥大化していることが多いのですが、これらはどれも画像の見た目には影響しません。 SVGOのような最適化ツールにファイルを通せば、見える結果には手を触れずにサイズを大幅に 縮小できます。詳しい手順は SVG最適化ガイドをお読みください。

PNGやJPGが代わりに必要になるとき

すべてのプラットフォームがSVGを受け付けるわけではありません。一部のSNS、 マーケットプレイスの出品、メールクライアント、古いコンテンツシステムはラスター画像しか 受け付けません。そうした場合はSVGをラスター化します — 固定解像度で一度レンダリングし、 ピクセル画像として書き出すのです。透明度が必要なとき（アイコン、色付き背景の上のロゴ）は SVGをPNGに変換し、 書き出し先が不透明な写真しか受け付けずファイルサイズが重要なときは SVGをJPGに変換しましょう。 どちらも完全にブラウザ内で実行され — ファイルがデバイスから外に出ることはありません。 高精細ディスプレイでもラスターが鮮明に見えるよう、表示サイズの2倍または3倍で書き出してください。

手早い答え：SVGを使うべきか？

• ロゴ、アイコン、フラットなイラストですか？ → はい、SVGです。 どんなサイズでも鮮明で、とても小さい。
• グラフィックを再着色したりアニメーションさせたい？ → はい、SVGです。 生きたマークアップです。
• 写真、あるいはディテールの豊かな画像ですか？ → いいえ — JPEG、WebP、AVIFを使いましょう。
• 信頼できないユーザーのSVGを表示しますか？ → まずサニタイズしましょう。
• プラットフォームがSVGを受け付けない？ → 2〜3倍のサイズでPNGかJPGに ラスター化しましょう。