> SVGが表示されない？12のよくある問題と解決方法

時間をかけて美しいSVGアイコンやイラストをデザインし、ウェブページに埋め込んだら…何も表示されない。壊れた画像アイコンが表示される。または画像は表示されるが、色やサイズが全く違う。

SVG表示問題はフロントエンド開発において最も厄介なトラブルの一つです。同じSVGファイルでも、ブラウザ、埋め込み方法、ホスティング環境によって動作が異なるからです。

本ガイドでは12の最も一般的なSVG表示問題を頻度順にまとめました。各問題には症状、根本原因、具体的な修正手順が含まれています。順番に確認してもいいですし、直面している問題に直接ジャンプしても構いません。

> 問題1：壊れた画像アイコンが表示される

症状： ページに壊れた画像アイコンが表示される（Chrome/Edgeではグレーのアイコン、Firefoxでは空白領域）。SVGが全くレンダリングされない。

原因A：MIMEタイプの設定エラー

これが最も一般的なSVG表示問題です。サーバーはSVGファイルのMIMEタイプをimage/svg+xmlに正しく設定する必要があります。そうしないと、ブラウザはレンダリングを拒否します。

確認方法：

ブラウザでSVGファイルのURLを直接開き、F12でDevToolsを開き、NetworkパネルでSVGリクエストのContent-Typeヘッダーを確認します。

サーバー別の修正方法：

Nginx：

# /etc/nginx/mime.types にこの行があることを確認
types {
    image/svg+xml svg svgz;
}

Apache（.htaccess）：

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

Node.js / Express：

app.use(express.static('public', {
  setHeaders: (res, path) => {
    if (path.endsWith('.svg')) {
      res.setHeader('Content-Type', 'image/svg+xml');
    }
  }
}));

原因B：ファイルパスの間違い

最も単純ですが見落とされやすい原因 — SVGファイルパスが間違っています。

確認方法：

DevToolsのConsoleパネルで404エラーがないか確認します。

修正： ファイルパスの大文字小文字を確認（Linuxサーバーは大文字小文字を区別します）、ファイルが実際に存在することを確認してください。

> 問題2：SVGが空白で表示される

症状： SVGは正常に読み込まれる（Networkパネルで200 OKを表示）が、ページ上には何も表示されない。

原因A：viewBoxの欠落または設定エラー

SVGのviewBox属性は可視領域を定義します。これがない、または間違った値が設定されていると、コンテンツが可視領域の外にある可能性があります。

<!-- 問題：viewBoxがない -->
<svg width="100" height="100">
  <rect x="200" y="200" width="50" height="50" fill="red"/>
</svg>

<!-- 修正：viewBoxがコンテンツ領域をカバー -->
<svg width="100" height="100" viewBox="0 0 300 300">
  <rect x="200" y="200" width="50" height="50" fill="red"/>
</svg>

修正方法：

SVG内のすべての図形要素の座標範囲を確認
すべての可視コンテンツをカバーするviewBoxを設定
またはブラウザでSVGを直接開いて表示を確認

原因B：width/heightが0に設定されている

<!-- 問題：寸法が0 -->
<svg width="0" height="0" viewBox="0 0 100 100">

修正： widthとheightに有効な値があることを確認するか、CSSで寸法を設定してください。

原因C：コンテンツの色が背景色と同じ

SVGのコンテンツが白で、背景も白 — 空白に見えます。

修正： SVGコンテナに一時的な背景色を追加して診断：

svg {
  background: #f0f0f0; /* 一時的な診断用背景 */
}

> 問題3：`<img>`経由のSVGでインタラクションが動かない

症状： SVG内のCSSアニメーション、JavaScriptインタラクション、ハイパーリンクが<img>タグで読み込むと動作しない。

原因

ブラウザのセキュリティ制限 — <img>タグで読み込まれたSVGは静的画像として扱われます。スクリプト、外部参照、一部のCSS機能は無効化されます。

修正：適切な埋め込み方法を選択：

方法	アニメーション	スクリプト	外部参照	CSSスタイリング
`<img>`	SMIL ✅	❌	❌	❌
`<object>`	✅	✅	✅	❌
`<iframe>`	✅	✅	✅	❌
インラインSVG	✅	✅	✅	✅
CSS `background`	SMIL ✅	❌	❌	❌

SVGの完全なインタラクティブ機能が必要な場合は、インラインSVGまたは<object>タグを使用してください。

> 問題4：CORSエラーでSVGが読み込まれない

症状： コンソールに「Cross-Origin Request Blocked」のようなエラーが表示される。SVGはローカルでは動作するが、デプロイ後は表示されない。

原因

SVGファイルとHTMLページが異なるドメインにある場合、ブラウザの同一オリジンポリシーが読み込みをブロックします。

修正

サーバーにCORSヘッダーを設定：

# Nginx設定
location ~* \.svg$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
}

<img>タグの場合：

<img>は表示目的では通常CORS制限を受けません（SVGコンテンツの読み取り時のみ）。ただし、SVGが内部的に外部リソース（フォント、画像）を参照している場合、それらの参照はCORSの対象になります。

> 問題5：SVG内のテキストが表示されない

症状： SVG内のテキストが表示されない、四角で表示される、または文字化けする。

原因A：フォントが読み込まれていない

SVGでカスタムフォントを使用しているが、そのフォントがページで読み込まれていない。

修正：

<!-- SVGにフォントを埋め込む -->
<defs>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
    text { font-family: 'Noto Sans JP', sans-serif; }
  </style>
</defs>

原因B：テキストがパスに変換されている

多くのデザインツールはエクスポート時にテキストをパスに変換します。フォントの一貫性は保たれますが、テキストは編集不可になります。変換が不完全な場合、一部のテキストが失われることがあります。

修正： デザインツールから再エクスポートし、テキスト変換設定を確認してください。

原因C：文字エンコーディング

非ASCII文字を含むSVGファイルはUTF-8エンコーディングを使用する必要があります。

修正：

# ファイルエンコーディングを確認
file -I your-file.svg

# UTF-8に変換
iconv -f Shift_JIS -t UTF-8 input.svg > output.svg

> 問題6：SVGの色が正しくない

症状： SVGの色がデザインファイルと一致しない。

原因A：カラースペースの違い

SVG 1.1はsRGBを使用します。SVGがCSS Color Level 4の新しい色関数（lab()、color()など）を使用している場合、一部のブラウザはサポートしていません。

修正： 標準のhex、rgb()、またはhsl()カラー値を使用してください。

原因B：CSS優先度による上書き

ページレベルのCSSがSVG要素のfillカラーを上書きしている可能性があります。

修正：

/* グローバルfillによるSVG内部の上書きを防止 */
svg path {
  fill: inherit; /* 内部SVGスタイルを有効にする */
}

> 問題7：SVGの拡大時にぼやける

症状： SVGが異なるサイズで表示された際、特に拡大時にぼやける。

原因

SVGはベクターベースなので本来は完璧に拡大できるはずです。ぼやけの原因は通常、SVGに埋め込まれたラスター画像（<image>タグ）が含まれているか、不要なラスタライズが行われていることです。

修正

埋め込まれたビットマップを確認：

grep -o '<image[^>]*' your-file.svg

ブラウザのレンダリングを確認： SVGコンテナにimage-rendering: pixelatedを設定しない
正しいアスペクト比を使用： CSSの寸法がviewBoxの比率と一致しない場合、ブラウザはSVGを引き伸ばします

> 問題8：SVGファイルが大きすぎて読み込みが遅い

症状： SVGの読み込みに時間がかかり、ページが白画面やフリーズする。

原因

デザインツールのエクスポートには大量の冗長データが含まれることがあります：エディタのメタデータ、空白文字、不要なグループ、未使用の定義など。

修正：SVGOで最適化

# SVGOをインストール
npm install -g svgo

# 単一ファイルを最適化（通常30-70%削減）
svgo input.svg -o output.svg

# バッチ最適化
svgo -f ./svg-directory/

手動最適化のコツ

エディタのメタデータを削除（<metadata>、sodipodi:、inkscape:名前空間）
同一パスをマージ
絶対パスの代わりに相対パスを使用
不可視要素を削除（display="none"またはopacity="0"）
繰り返し使用する要素を<defs>に抽出し<use>で参照

> 問題9：IEや古いブラウザでSVGが動かない

症状： SVGはChrome/Firefoxで動作するが、IE11や古いSafariでは動作しない。

原因

IE11や古いブラウザはSVGサポートが不完全です：

foreignObjectをサポートしない
SMILアニメーションが動作しない
一部のCSSプロパティが認識されない
viewBoxのスケーリング動作が一貫しない

修正

ポリフィルを使用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg4everybody/2.1.9/svg4everybody.min.js"></script>
<script>svg4everybody();</script>

非互換機能を避ける： SMILの代わりにCSSアニメーションを使用
PNGフォールバックを提供：

<picture>
  <source type="image/svg+xml" srcset="logo.svg">
  <img src="logo.png" alt="Logo">
</picture>

> 問題10：インラインSVGがページCSSと競合する

症状： SVGをHTMLにインライン挿入した後、色やレイアウトが異常になる。

原因

インラインSVGの要素はページのCSSを継承します。svg { fill: currentColor; }のようなグローバルスタイルルールがあると、SVG内部のすべての要素に影響します。

修正

/* SVGスタイルを分離 */
.your-svg-container svg {
  all: initial; /* 継承されたスタイルをすべてリセット */
  display: block;
  /* 必要なスタイルのみ再適用 */
}

またはShadow DOMを使用してスタイルを完全に分離します。

> 問題11：SVGアニメーションが再生されない

症状： SVGのアニメーション効果が動作しない — SMIL、CSS、Web Animations APIのいずれでも。

原因A：`<img>`タグの制限

問題3で説明した通り、<img>タグではSMILアニメーションのみサポートされます。

原因B：`prefers-reduced-motion`の設定

ユーザーのシステム設定で「視差効果を減らす」が有効になっており、ブラウザが不要なアニメーションを無効化している。

修正：

@media (prefers-reduced-motion: no-preference) {
  .animated-svg {
    animation: rotate 2s linear infinite;
  }
}

原因C：未定義のキーフレーム

修正： @keyframesがSVGからアクセス可能なスコープ内で定義されていることを確認してください。

> 問題12：SVGファイルが破損している

症状： SVGファイルがどのツールでも開けない、または開けても内容が大きく欠落している。

原因

転送、編集、保存の過程でファイルが切り詰められたり破損したりした。

修正

SVG構造を検証：

# xmllintでXML構文を検証
xmllint --noout your-file.svg

# またはW3Cバリデーターを使用
# https://validator.w3.org/

一般的な修正方法：

ファイルが完全か確認 — </svg>終了タグが存在することを確認
タグの不一致がないか確認
特殊文字が正しくエスケープされているか確認（& → &、< → <）
バージョン管理から以前のバージョンを復元

svg2img.ccで素早くテスト：

SVGがブラウザで正常に表示されない場合、まずsvg2img.ccでテストしてみてください。SVGをページにドラッグ — 正常にレンダリングされてPNGに変換されれば、ファイルに問題はなく、埋め込み方法やサーバー設定に問題がある可能性が高いです。svg2img.ccでもレンダリングできない場合、ファイル自体に構造的な問題があるかもしれません。

> クイックトラブルシューティングフロー

SVGが表示されない
├── 壊れた画像アイコン？
│   ├── ファイルパスを確認（404？）
│   ├── MIMEタイプを確認（image/svg+xml？）
│   └── ファイルの破損を確認
├── 空白で表示？
│   ├── viewBoxの設定を確認
│   ├── width/heightを確認
│   └── 色が背景と同じでないか確認
├── インタラクションが動かない？
│   ├── <img>タグを使わない
│   └── インラインSVGまたは<object>を使用
├── コンソールにCORSエラー？
│   └── サーバーのCORSヘッダーを設定
└── 色/表示がおかしい？
    ├── CSSの競合を確認
    ├── フォントの読み込みを確認
    └── カラースペースを確認

> SVG表示問題を予防するベストプラクティス

必ずviewBoxとxmlnsを宣言：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

SVGOで最適化 — ファイルサイズを削減しつつ、互換性の問題の潜在的な原因を排除
複数ブラウザでテスト — 少なくともChrome、Firefox、Safariで確認
svg2img.ccで検証 — SVGファイルが正常かどうかを素早く確認
サーバーのMIMEタイプを正しく設定 — デプロイ時に必ずimage/svg+xmlを確認
SVG内でJavaScriptの使用を避ける — すべての埋め込み方法での互換性を向上
テキストをパスに変換 — テキスト編集が不要な場合、フォント関連の表示問題を防止

> まとめ

SVG表示問題は多様ですが、圧倒的多数はいくつかの一般的な原因に trace back できます：MIMEタイプの設定ミス、viewBoxの問題、CORS制限、CSSの競合、ファイルの破損。本ガイドのトラブルシューティングフローチャートに従えば、ほとんどのSVG表示問題を迅速に特定・修正できます。

SVGファイル自体に問題があるかどうか不明な場合は、まずsvg2img.ccでテストしてください — ファイルのアップロードなしでブラウザ上で完全に動作するため、SVGの完全性を確認する最速の方法です。

> よくある質問

Q: SVGはローカルでは動作するが、サーバーにデプロイすると動かなくなりました。なぜですか？

A: 最も一般的な原因は、サーバーがSVGのMIMEタイプをimage/svg+xmlに設定していないことです。サーバー設定を確認し、.svgファイルに正しいContent-Typeヘッダーが設定されていることを確認してください。

Q: SVGファイルが破損しているかどうかを確認するには？

A: ブラウザでSVGを直接開いてください。正常にレンダリングされればファイルに問題はありません。xmllint --noout file.svgでXML構文を検証するか、svg2img.ccにドラッグして素早くテストすることもできます。

Q: SVG内の<use>参照が表示されないのはなぜですか？

A: href属性が正しいことを確認してください（SVG 2ではxlink:hrefの代わりにhrefを使用）。参照先の要素が<defs>で定義されており、IDが重複していないことを確認してください。

Q: SVGがモバイルでおかしく表示される場合はどうすれば？

A: SVGのviewBoxと寸法がレスポンシブレイアウトに対応しているか確認してください。CSS max-width: 100%; height: auto;でSVGがコンテナ幅に適応するようにします。

Q: 複数のSVG間のID競合は問題を引き起こしますか？

A: はい。同じページに複数のインラインSVGがあり、同じID（例：#gradient1）を使用している場合、ブラウザが参照を混同する可能性があります。各SVGのIDが一意であることを確認するか、IDの代わりにCSSクラスを使用してください。

Q: SVGの<foreignObject>の内容が表示されないのはなぜですか？

A: HTMLを埋め込んだ<foreignObject>にはセキュリティ制限があります。<img>で読み込んだSVGではこの要素をサポートしないブラウザがあります。正常に動作させるにはインラインSVG埋め込みを使用してください。

> SVGが表示されない？12のよくある問題と解決方法

> 問題1：壊れた画像アイコンが表示される

原因A：MIMEタイプの設定エラー

原因B：ファイルパスの間違い

> 問題2：SVGが空白で表示される

原因A：viewBoxの欠落または設定エラー

原因B：width/heightが0に設定されている

原因C：コンテンツの色が背景色と同じ

> 問題3：<img>経由のSVGでインタラクションが動かない

原因

> 問題4：CORSエラーでSVGが読み込まれない

原因

修正

> 問題5：SVG内のテキストが表示されない

原因A：フォントが読み込まれていない

原因B：テキストがパスに変換されている

原因C：文字エンコーディング

> 問題6：SVGの色が正しくない

原因A：カラースペースの違い

原因B：CSS優先度による上書き

> 問題7：SVGの拡大時にぼやける

原因

修正

> 問題8：SVGファイルが大きすぎて読み込みが遅い

原因

修正：SVGOで最適化

手動最適化のコツ

> 問題9：IEや古いブラウザでSVGが動かない

原因

修正

> 問題10：インラインSVGがページCSSと競合する

原因

修正

> 問題11：SVGアニメーションが再生されない

原因A：<img>タグの制限

原因B：prefers-reduced-motionの設定

原因C：未定義のキーフレーム

> 問題12：SVGファイルが破損している

原因

修正

> クイックトラブルシューティングフロー

> SVG表示問題を予防するベストプラクティス

> まとめ

> よくある質問

> 問題3：`<img>`経由のSVGでインタラクションが動かない

原因A：`<img>`タグの制限

原因B：`prefers-reduced-motion`の設定