---
title: "SVG画像が表示されないときの原因と対処"
description: "PNGは表示されるのにSVGだけ出ない――MIMEタイプや読み込み方法の違いによる複数の原因を、症状ごとに切り分けて特定できるよう整理した記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/svg-not-showing"
markdown: "https://giga-site.com/articles/svg-not-showing/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# SVG画像が表示されないときの原因と対処

アイコンやロゴに使ったSVGが表示されない——その原因はファイルの場所や読み込み方法、サーバーが返す種別（MIMEタイプ）など複数あります。PNGなら出るのにSVGだけ出ない、という症状は切り分け方を知っていれば早く直せます。この記事では原因の見つけ方と対処の手順を解説します。

> Source HTML: https://giga-site.com/articles/svg-not-showing
> Article index: https://giga-site.com/articles/index.md

## 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には認証と公開期限を設定しておくと安心です。

## よくある質問

### PNGは表示されるのにSVGだけ出ないのはなぜですか。

SVGはサーバーが返す種別（MIMEタイプ）が画像として正しくないと表示できないことがあり、PNGとは事情が異なります。まずSVGのURLを直接開き、画像として表示されるかを確認して種別の問題かを切り分けてください。

### 読み込めているのに表示されません。

要素の幅や高さの指定がなくサイズ0になっている、あるいは色が背景と同化しているケースがあります。開発者ツールで要素のサイズと色を確認し、読み込み失敗ではない場合はこれらを疑ってください。

### SVGのMIMEタイプはどう確認しますか。

SVGファイルのURLをブラウザで直接開き、画像として表示されればおおむね問題ありません。コードや文字列として表示される場合は、サーバーが画像の種別として返していない可能性があります。

### 手元では出るのに共有すると出ないのはなぜですか。

参照パスやフォルダ構成のずれが原因のことが多いです。フォルダ構成を保ったまま一式を共有して相手の環境で確認すると、パス関連の問題を再現しやすく、原因の特定が早まります。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [背景画像が表示されないときの原因と対処](https://giga-site.com/articles/background-image-not-showing/index.md)
- [YouTube埋め込みが表示されないときの対処](https://giga-site.com/articles/youtube-embed-not-showing/index.md)
- [Googleマップ埋め込みが表示されないときの対処](https://giga-site.com/articles/google-maps-embed-not-showing/index.md)
- [X（Twitter）埋め込みが表示されないときの対処](https://giga-site.com/articles/x-twitter-embed-not-showing/index.md)
- [::before・::afterで作った装飾が表示されないときの対処](https://giga-site.com/articles/pseudo-element-not-showing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SVG画像が表示されないときの原因と対処",
  "description": "PNGは表示されるのにSVGだけ出ない――MIMEタイプや読み込み方法の違いによる複数の原因を、症状ごとに切り分けて特定できるよう整理した記事です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/svg-not-showing",
  "url": "https://giga-site.com/articles/svg-not-showing",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "PNGは表示されるのにSVGだけ出ないのはなぜですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SVGはサーバーが返す種別（MIMEタイプ）が画像として正しくないと表示できないことがあり、PNGとは事情が異なります。まずSVGのURLを直接開き、画像として表示されるかを確認して種別の問題かを切り分けてください。"
      }
    },
    {
      "@type": "Question",
      "name": "読み込めているのに表示されません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "要素の幅や高さの指定がなくサイズ0になっている、あるいは色が背景と同化しているケースがあります。開発者ツールで要素のサイズと色を確認し、読み込み失敗ではない場合はこれらを疑ってください。"
      }
    },
    {
      "@type": "Question",
      "name": "SVGのMIMEタイプはどう確認しますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SVGファイルのURLをブラウザで直接開き、画像として表示されればおおむね問題ありません。コードや文字列として表示される場合は、サーバーが画像の種別として返していない可能性があります。"
      }
    },
    {
      "@type": "Question",
      "name": "手元では出るのに共有すると出ないのはなぜですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "参照パスやフォルダ構成のずれが原因のことが多いです。フォルダ構成を保ったまま一式を共有して相手の環境で確認すると、パス関連の問題を再現しやすく、原因の特定が早まります。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```