---
title: "SVGが表示されないときの原因と直し方"
description: "HTMLでSVGが表示されない問題を解決したいWebデザイナー・制作者向け。インラインSVG・imgタグ・object要素など参照方法別の原因と、MIMEタイプ・CSP・パスエラーを含む実践的な修正手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/svg-not-showing-fix"
markdown: "https://giga-site.com/articles/svg-not-showing-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# SVGが表示されないときの原因と直し方

HTMLにSVGを埋め込んだのにブラウザで何も表示されない、あるいはimgタグで参照したSVGが空白になる問題は、主にMIMEタイプの設定ミスやSVGの記述エラー、CSPの制限によって発生します。エラーの種類によって対処が異なるため、まずブラウザのコンソールと開発者ツールで状況を切り分けることが最初のステップです。

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

## よくある原因

SVGが表示されない原因として最も多いのはMIMEタイプの問題です。Webサーバーが.svgファイルを`image/svg+xml`ではなく`text/plain`や`application/octet-stream`として返すと、ブラウザはSVGとして解釈せず表示を拒否します。特にPythonの`http.server`やローカルのNginxデフォルト設定ではSVGのMIMEタイプが未設定のことがあります。

インラインSVG（HTMLにSVGタグを直書き）の場合は、`<svg>`タグのwidth/heightまたはviewBox属性が指定されていないと、SVG要素は存在するが表示領域が0×0になって見えない状態になります。また、`xmlns="http://www.w3.org/2000/svg"`属性がHTMLに直書きする場合は省略可能ですが、外部.svgファイルとして参照する場合は必須です。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

まず開発者ツールのNetworkタブでSVGファイルへのリクエストを確認します。404（ファイルが見つからない）なら参照パスの誤り、200でもContent-Typeがimage/svg+xmlでなければMIMEタイプの問題です。インラインSVGの場合はNetworkタブには出ないため、ElementsタブでSVGタグを選択してComputed Styleのwidth/heightを確認します。

Nginxを使っているならconf内の`include mime.types`が有効か、mime.typesにsvgが含まれるかを確認します。CloudflareやGitHub PagesはSVGのMIMEタイプを自動設定するため問題になりにくいですが、独自サーバーでは手動設定が必要です。ギガサイト便にSVGを含むzipをアップロードする場合は、Cloudflareが配信するためMIMEタイプの心配は不要です。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

共有先で「SVGが見えない」という報告が来たとき、まず相手のブラウザを確認します。IE11はインラインSVGを一部サポートしていますがCSS内のSVGは扱いが特殊です。現行のChrome/Firefox/Safariならインラインもimgタグも問題なく表示できるため、相手が古いブラウザを使っていないか確認します。

相手のブラウザが最新であれば、コンソールでエラーを確認してもらいます。「Content Security Policy」に関するエラーが出ていれば、サーバーのCSPヘッダーがSVGの表示を制限しています。CSPが原因の場合は`img-src 'self' data:`のような設定の見直しが必要で、ギガサイト便経由で配信している場合は発生しにくい問題です。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

SVGの表示問題を量産しないためには、HTMLに直接インラインで書くか、Data URI（`<img src="data:image/svg+xml,...">`）で埋め込む方法が最もトラブルが少ない選択肢です。外部ファイル参照はサーバーのMIMEタイプ設定に依存するため、配布を前提とした静的HTMLではなるべくインラインかData URIを使います。

AI生成HTMLでSVGを使う場合は、プロンプトに「SVGはインラインで記述し、外部ファイル参照はしないでください。viewBoxとwidthを必ず指定してください」と追記します。この一文で生成されたHTMLのSVG表示の安定性が大きく向上します。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### SVGがChromeでは表示されるのにSafariでは表示されないのはなぜですか？

SVG内でCSSの`filter`や`clip-path`を使っている場合、Safariの対応範囲がChromeと異なるためです。またSafariはSVG内のforeignObjectをほぼサポートしないため、foreignObjectを使ったHTMLの埋め込みはSafariでは表示されません。

### SVGをCSSの`background-image`で使う場合、特別な注意点はありますか？

URL参照する場合はMIMEタイプが必要です。インラインで使うにはSVGをURLエンコードして`background-image: url("data:image/svg+xml,...")`と記述します。SVG内にスタイルや色を持たせたい場合はURLエンコードが複雑になるため、Webツール（URL-encoder for SVG）を使うと便利です。

### SVGアニメーション（smilまたはCSS animation）が表示されないケースはありますか？

SMILアニメーション（animate/animateTransformタグ）はChrome 45以降で一時廃止の動きがあり、Chromeでは再度サポートされましたが、Edge LegacyやIE11では動作しません。CSS animationをSVG内に記述する方式の方が現在は安定しています。

## 関連記事

- [SVGが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/svg-not-showing-checklist/index.md)
- [SVGが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/svg-not-showing-ai-prompt/index.md)
- [SVGが表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/svg-not-showing-request-message/index.md)
- [WebP画像が表示されないときの原因と直し方](https://giga-site.com/articles/webp-not-showing-fix/index.md)
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)
- [WebP画像が表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/webp-not-showing-checklist/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SVGが表示されないときの原因と直し方",
  "description": "HTMLでSVGが表示されない問題を解決したいWebデザイナー・制作者向け。インラインSVG・imgタグ・object要素など参照方法別の原因と、MIMEタイプ・CSP・パスエラーを含む実践的な修正手順を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/svg-not-showing-fix",
  "url": "https://giga-site.com/articles/svg-not-showing-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "SVGがChromeでは表示されるのにSafariでは表示されないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SVG内でCSSの`filter`や`clip-path`を使っている場合、Safariの対応範囲がChromeと異なるためです。またSafariはSVG内のforeignObjectをほぼサポートしないため、foreignObjectを使ったHTMLの埋め込みはSafariでは表示されません。"
      }
    },
    {
      "@type": "Question",
      "name": "SVGをCSSの`background-image`で使う場合、特別な注意点はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "URL参照する場合はMIMEタイプが必要です。インラインで使うにはSVGをURLエンコードして`background-image: url(\"data:image/svg+xml,...\")`と記述します。SVG内にスタイルや色を持たせたい場合はURLエンコードが複雑になるため、Webツール（URL-encoder for SVG）を使うと便利です。"
      }
    },
    {
      "@type": "Question",
      "name": "SVGアニメーション（smilまたはCSS animation）が表示されないケースはありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SMILアニメーション（animate/animateTransformタグ）はChrome 45以降で一時廃止の動きがあり、Chromeでは再度サポートされましたが、Edge LegacyやIE11では動作しません。CSS animationをSVG内に記述する方式の方が現在は安定しています。"
      }
    }
  ]
}
```