チュートリアル2025年12月20日約9分

SVGが表示されないときに確認する12項目

表示方法とエラーの種類を切り分け、サーバー応答、SVG本体、ページ側の指定を順番に調べるためのチェックリストです。

Jack更新日 2026年8月26日

SVGが空白になる、壊れた画像として表示される、色やサイズが想定と異なる場合は、まず読み込み自体が失敗しているのか、読み込み後の描画が崩れているのかを切り分けます。

原因はサーバーのMIMEタイプ、XML構文、viewBox、CORS、外部リソース、CSSなど複数あります。以下の12項目を、症状に近いものから確認してください。

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

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

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

MIMEタイプの誤設定は、SVGが表示されないときに確認したい項目の一つです。サーバーがSVGへimage/svg+xmlを返しているか確認してください。異なるContent-Typeやセキュリティ設定によって、ブラウザが意図どおりに扱わない場合があります。

確認方法：

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

サーバー別の修正方法：

Nginx：

nginx

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

Apache（.htaccess）：

apache

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

Node.js / Express：

javascript

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

xml

<!-- 問題：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に設定されている

xml

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

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

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

SVGの要素と背景がどちらも白いと、空白に見えます。

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

css

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

# 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でカスタムフォントを使用しているが、そのフォントがページで読み込まれていない。

修正：

xml

<!-- 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エンコーディングを使用する必要があります。

修正：

bash

# ファイルエンコーディングを確認
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カラーを上書きしている可能性があります。

修正：

css

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

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

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

原因

SVGのパスや図形は拡大しても輪郭が粗くなりません。ぼやける場合は、SVG内にラスター画像（<image>タグ）が埋め込まれている、フィルターが使われている、途中でラスタライズされている、といった原因を確認します。

修正

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

bash

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

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

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

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

原因

デザインツールから書き出したSVGには、エディターのメタデータ、空白、不要なグループ、未使用の定義などが残ることがあります。

修正：SVGOで最適化

bash

# 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のスケーリング動作が一貫しない

修正

ポリフィルを使用：

html

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

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

html

<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内部のすべての要素に影響します。

修正

css

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

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

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

症状： SMIL、CSS、Web Animations APIで設定したアニメーションが動作しない。

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

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

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

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

修正：

css

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

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

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

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

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

原因

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

修正

SVG構造を検証：

bash

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

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

一般的な修正方法：

</svg> 終了タグがあり、ファイルが途中で切れていないか確認
タグの不一致がないか確認
特殊文字が正しくエスケープされているか確認（& → &、< → <）
バージョン管理から以前のバージョンを復元

svg2img.ccで素早くテスト：

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

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

text

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

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

必ずviewBoxとxmlnsを宣言：

xml

<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が表示されない原因の多くは、MIMEタイプの設定ミス、viewBoxの問題、CORS制限、CSSの競合、ファイルの破損のいずれかです。本ガイドの手順に沿って、一つずつ切り分けてください。

SVGファイル自体に問題があるか分からない場合は、まずsvg2img.ccで表示と変換を試してください。ファイルはブラウザ内で処理されるため、外部サーバーへ送信せずに構造を確認できます。

よくある質問

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

A: 本番環境のSVGレスポンスがimage/svg+xmlになっているか、CORSやContent Security Policyで必要なリソースが遮断されていないかを確認してください。ローカルと本番でファイルパスの大文字・小文字が異なる場合もあります。

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

A: まずブラウザでSVGを直接開き、xmllint --noout file.svgなどでXML構文を検証します。直接表示できても、外部リソース、CSS、埋め込み方法に問題が残る場合があるため、実際の利用環境でも確認してください。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を変換できます。

変換ツールを開く