よくある原因
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内に記述する方式の方が現在は安定しています。