SVG画像が表示されないときの原因と対処

SVGが表示されない主な原因

SVGはベクター形式の画像で、img要素での読み込み、background-imageでの指定、HTMLへの直接埋め込みなど複数の使い方があります。表示されない原因は使い方ごとに少しずつ異なるため、まずどの方法で読み込んでいるかを確認することが出発点です。

よくある原因は、ファイルの参照パスが間違っている、サーバーがSVGを正しい種別（MIMEタイプ）で返していない、SVGファイル自体が壊れている、あるいは埋め込んだSVGのコードに不備がある、といったものです。順に切り分けていきます。

原因になりやすいポイント

SVGが出ないときに疑うべき箇所には傾向があります。次のどれに当たるかを確認しましょう。

• 参照パスが間違っていてファイルにたどり着けていない（リンク切れ）
• サーバーがSVGを画像ではない種別として返している（MIMEタイプの不一致）
• SVGファイルの中身が壊れている、または不完全
• 幅や高さの指定がなく、サイズ0で表示されていない（実は読み込めている）
• 色が背景と同じで見えないだけ、という見落とし

症状別チェック表

SVG画像が表示されないときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因を切り分ける手順

表示されないSVGは、読み込めているかどうかから順に確認すると早く原因にたどり着けます。次の流れで進めてください。

1. ブラウザの開発者ツールのネットワークで、SVGの読み込みが成功しているか（リンク切れでないか）を確認する
2. 読み込み失敗なら、参照パスが正しいか、ファイルが想定の場所にあるかを見直す
3. 読み込みは成功しているのに出ない場合は、要素のサイズが0になっていないか、色が背景と同化していないかを確認する
4. SVGのURLを直接ブラウザで開き、ファイル単体で正しく表示されるか確かめる
5. 単体で開けないなら、サーバーが返す種別（MIMEタイプ）が画像として正しいか、ファイルが壊れていないかを調べる
6. 原因を直したら、複数のブラウザで表示を再確認する

読み込み方法とMIMEタイプ

img要素やbackground-imageで読み込む場合、サーバーがSVGを画像の種別（image/svg+xml）として返していないと、ブラウザが画像と認識せず表示できないことがあります。SVGのURLを直接開いて、画像として表示されるかコードとして表示されるかを見ると、種別の問題かどうかを切り分けられます。

HTMLに直接SVGコードを埋め込む方法なら種別の問題は避けられますが、コード自体に不備があると出ません。サイズが0で見えないだけのこともあるので、幅・高さの指定も確認してください。どの方法でも、まず「読み込めているのに見えない」のか「そもそも読み込めていない」のかを区別するのが要点です。

ZIP内のSVGをまとめて確認する

SVGの不具合は、参照パスやファイル構成に依存することが多く、手元では出るのに共有すると出ない、という食い違いが起きがちです。アイコンや画像を含む一式をそのままの構成で確認できると、パス関連の問題に早く気づけます。

ギガサイト便なら、SVGを含むサイトをZIPごとドロップして共有URLを発行でき、フォルダ構成を保ったまま相手に渡せるので参照パスのずれを再現・確認しやすくなります。修正後は同じURLのまま差し替えられるため、SVGを直しては表示を確認する作業を、リンクを送り直さずに回せます。社外と共有する確認URLには認証と公開期限を設定しておくと安心です。