---
title: "SVGアイコンとは｜HTMLへの埋め込み方法・PNG・アイコンフォントとの比較"
description: "SVGアイコンの特徴とHTMLへの埋め込み方法を解説します。PNG画像・Font Awesomeなどのアイコンフォントとの違い、色・サイズ変更の方法、アクセシビリティ対応もまとめました。"
date: 2026-06-16
category: Web制作
tags: [SVG]
related_tools: [icon]
draft: false
---

**SVG（Scalable Vector Graphics）** は、ベクター形式の画像フォーマットです。拡大・縮小しても画質が劣化しないため、Webサイトのアイコン・ロゴ・イラストに広く使われています。

## SVGの特徴

### 解像度に依存しない

JPEGやPNGはピクセルの集まりで構成されているため、拡大すると荒くなります。SVGは「点と線の数式」で図形を表現するため、どんなサイズに拡大しても綺麗に表示されます。

Retinaディスプレイや4K画面など高解像度環境でも鮮明に表示できる点がSVGが普及した大きな理由です。

### ファイルサイズが小さい

シンプルなアイコンであれば数百バイト〜数KBで収まります。同じ画像のPNGと比べると大幅に小さくなることが多く、ページの読み込み速度に貢献します。

### CSSで色・サイズを変更できる

SVGはHTMLと同様のXML形式で記述されており、CSSで見た目を変更できます。アイコンの色をホバーで変えたり、テーマカラーに合わせて動的に変えたりすることが容易です。

## SVGのHTML埋め込み方法

### インラインSVG（推奨）

SVGコードをHTMLに直接埋め込む方法です。CSSやJavaScriptで制御しやすく、HTTPリクエストが増えません。

```html
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" y1="8" x2="12" y2="16"/>
</svg>
```

`stroke="currentColor"` を指定しておくと、親要素の `color` CSS値をアイコンの色として継承します。

```css
.icon-button {
  color: #017387;  /* この色がアイコンにも適用される */
}
```

### `<img>` タグで読み込む

```html
<img src="/icons/check.svg" alt="完了" width="24" height="24">
```

シンプルですが、CSSでの色変更ができません。アイコンの色が固定でよい場合に使います。

### CSS `background-image` で使う

```css
.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}
```

装飾目的のアイコンに使う方法です。スクリーンリーダーには認識されません。

## PNG・アイコンフォントとの比較

| 比較項目 | SVG | PNG | アイコンフォント |
|---|---|---|---|
| 拡大しても綺麗 | ✅ | ❌（荒くなる） | ✅ |
| ファイルサイズ | 小〜中 | 中〜大 | 小（フォント1ファイル） |
| CSSで色変更 | ✅ | ❌ | ✅（`color`プロパティ） |
| 複数色対応 | ✅ | ✅ | ❌（単色のみ） |
| アニメーション | ✅ | ❌ | 限定的 |
| アクセシビリティ | `<title>`タグで対応可 | `alt`属性で対応 | 要追加対応 |
| 読み込み方式 | 必要な分だけ | 必要な分だけ | フォント全体を読み込む |

アイコンフォント（Font Awesomeなど）は数百〜数千のアイコンをフォントとして一括読み込みするため、実際に使うアイコンが少ない場合は不要なファイルを大量に読み込む非効率が生じます。SVGは必要なアイコンだけを読み込むため、パフォーマンス面で有利です。

## viewBoxとサイズ指定

SVGには `viewBox` 属性と `width`/`height` 属性があります。

```html
<svg viewBox="0 0 24 24" width="48" height="48">
```

`viewBox="0 0 24 24"` は「0,0から24×24の領域を描画範囲とする」という意味です。`width="48"` でも `width="16"` でも、`viewBox` で定義した描画内容を指定サイズにスケーリングして表示します。

CSSでサイズを変えたい場合はHTMLの `width`/`height` を省略し、CSSで制御するのが一般的です。

```css
.icon {
  width: 1.5rem;
  height: 1.5rem;
}
```

## アクセシビリティ対応

アイコンが意味を持つ場合（ボタンのラベルとして使うなど）は、スクリーンリーダー向けにテキストを追加します。

```html
<!-- インラインSVGでの対応 -->
<svg aria-label="閉じる" role="img" viewBox="0 0 24 24">
  <title>閉じる</title>
  <!-- パスデータ -->
</svg>

<!-- 装飾目的のアイコン（読み上げ不要）-->
<svg aria-hidden="true" viewBox="0 0 24 24">
  <!-- パスデータ -->
</svg>
```

隣にテキストラベルがある場合は `aria-hidden="true"` でスクリーンリーダーからアイコンを隠すことで、「チェックマーク 完了」のような二重読み上げを防げます。