HTMLでSVGが表示されない？デバッグ・チェックリスト

SVG Nexus · 最終更新: 11月 2026

SVGが壊れた画像アイコン、空の箱、あるいは何も表示されない場合、原因はほぼ必ず6つのうちの1つです。症状をリスト（読み込み、MIMEタイプ、viewBox、見えない塗り、サイズ、埋め込み制限）に照らし合わせ、数分で直してください。

最初の一手：ファイル単体で開く

ページに触る前に、SVGのURLをブラウザのタブで直接開いてください。そこで描画されるなら、ファイルは健全で、バグはページの埋め込み方にあります。単体でも失敗するなら、デバッグ対象はHTMLではなくファイルかサーバーです。この1つのテストで探索空間が半分になり、このチェックリストの残りは、あなたがどちらの半分にいるか分かっていることを前提とします。

壊れた画像アイコン：そもそも届いていない

<img>のプレースホルダや代替テキストが表示されるのは、リクエストが失敗したからです。パスを確認してください（相対URLはページを基準に解決され、移動したアセットフォルダが古典的な破綻です）。次にネットワークパネルで応答自体を確認します。404はアドレスを指し、誤ったMIMEタイプ（サーバーは image/svg+xml を返さなければなりません）は、一部のサーバーが画像として描画すること自体を拒むことを意味します。混合コンテンツ（https:// のページ上の http:// のSVG）は、現代のブラウザに静かにブロックされます。

箱は正しいが空：見えないアートワーク

寸法は正しいのに中身がない要素は、塗りか座標を指し示します。マークアップを開いて見てください。fill="none"で線のないパスは、設計上何も塗りません。背景と一致する塗りは、その背景の上でのみ見えません。宣言されたviewBoxの外に描かれた絵は切り取られます。ファイルにviewBoxがまったくない場合、パーセントベースの座標は解決の拠り所を失い、崩壊します。パス内の数字を、それらが住むべきviewBoxの窓と比較してください。

インラインSVGが何も描画しない

貼り付けたマークアップは別の失敗をします。HTMLは寛容ですが、XMLエディタからの貼り付けは、XML宣言や閉じられていないタグ、文書をねじる重複IDを持ち込むことがあります。もう1つの微妙な殺し屋は、同じグラデーションIDで同じアイコンを2回インライン化すると、2つ目のコピーが1つ目の定義で描画されるか、まったく描画されないことです（このシリーズのID競合ガイドが扱います）。貼ったブロックの半分を取り除いて検証してください。二分探索は凝視に勝ります。

馬鹿げたサイズ：巨大、またはゼロに崩壊

CSSサイズもwidth/heightもないインラインSVGは、置換要素の既定（しばしば300 × 150）にフォールバックします。一方、寸法のある親がないwidth="100%"は、レイアウト次第で引き伸びたり消えたりします。アイコンにCSSで意図的なサイズを与え、viewBoxを保持してください。それでも拡大縮小がおかしいなら、viewBoxがアートワークに寄り添っていません。viewBoxガイドが正規化を説明します。なお、固有寸法のない<img>のSVGは、一部の古いエンジンではCSSの両寸法が必要です。

ローカルでは動き、本番で壊れる

埋め込み制限を疑ってください。外部の<use href="other-file.svg#id">はクロスオリジンでブロックされ、file://からは不安定です。data URIの背景は、エンコードされていない#1つで失敗します。厳格なコンテンツセキュリティポリシーは、予期しないオリジンからのSVG画像を拒むことがあります。ネットワークとコンソールのパネルを開いて再現してください。ブラウザはほぼ必ず、どのルールが発火したかを、誰も読まないあの場所で教えてくれます。

<!-- Required namespace + viewBox + Content-Type: image/svg+xml -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="9"/>
</svg>

← 実践的なSVGガイド＆チュートリアル