よくある原因
SVGの表示問題は参照方法ごとに原因が異なります。インラインSVGではviewBox・width・height属性の欠如が最多です。imgタグ参照ではサーバーのMIMEタイプ不足とパスの誤り、objectタグではtype属性の省略、CSSのbackground-imageではURLエンコード漏れが主な原因です。どの参照方法を使っているかを先に特定することがチェックリストのスタートです。
AI生成HTMLでSVGが使われている場合は、AIがSVGコードを誤って生成していることも原因になります。SVGのXMLは構文エラーに厳しく、閉じタグの欠如やネームスペースの誤りがあると静かに何も表示されない動作になります。ブラウザのElementsタブにSVGタグが存在するか、存在するが空か、そもそも存在しないかを確認してから次のステップに進みます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
チェック1：インラインSVGの場合 → `<svg>`タグに`viewBox`と`width`/`height`が設定されているか確認する。設定がなければ`viewBox="0 0 100 100" width="100" height="100"`のように追加する。チェック2：imgタグでSVGを参照している場合 → Networkタブでsvgへのリクエストを確認し、ステータス200かつContent-Typeがimage/svg+xmlであるか確認する。
チェック3：CSSのbackground-imageでSVGを使っている場合 → データURIを使っているならSVGが正しくURLエンコードされているか確認する（#が%23になっているかなど）。外部ファイル参照の場合はパスを絶対パスに変更して試す。チェック4：コンソールに「Content Security Policy」のエラーが出ていないか確認する。出ている場合はCSPヘッダーのimg-srcやdefault-srcの設定を見直す。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
共有先で「SVGが表示されない」と報告が来た場合、まず「Chromeの最新版で試してみてください」と依頼します。旧ブラウザ固有の問題と実装の問題を分けるためです。最新Chromeでも表示されない場合は、コンソールのエラーメッセージをコピーしてもらいます。
SVGがアイコンやロゴとして使われている場合、「何も表示されていない（空白）」「壊れた画像アイコンが出ている」「赤×が表示されている」の3パターンで原因の特定スピードが変わります。「空白」ならviewBoxやサイズ問題、「壊れた画像アイコン」ならパスやMIMEタイプ問題、「赤×」なら読み込み自体が失敗しています。この区別を相手に確認してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
SVGを多用するHTMLテンプレートを作る場合は、テンプレート段階でSVGの参照方法を統一します。推奨はインラインSVGで、理由は外部ファイルへの依存がなくMIMEタイプ問題が起きないこと、CSSで色をカスタマイズしやすいことです。ロゴや繰り返し使うSVGもインラインでHTMLに直書きしてから圧縮することをすすめます。
ギガサイト便でSVGを含むHTMLを配布する前に、発行したプレビューURLをChromeのシークレットウィンドウで開いてSVGが正しく表示されるか確認します。シークレットウィンドウはキャッシュや拡張機能の影響を受けないため、クリーンな状態での動作確認になります。この手順を共有前のルーティンに組み込むことで、SVG関連のトラブルのほとんどを事前に発見できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
SVGが表示されているようなのにクリックしても反応しないのはなぜですか？
imgタグやCSSのbackground-imageで参照したSVGにはJavaScriptのイベントリスナーが効きません。SVGにクリックイベントを付けたい場合はインラインSVGにする必要があります。objectタグ経由でも一部は動作しますが、クロスオリジンの制限がかかることがあります。
外部サービスからSVGのURLを参照するとき（例：SVGリポジトリサービス）に気をつけることはありますか？
外部URLを参照する場合、そのサービスがdown/変更になるとSVGが表示されなくなります。本番配布するHTMLには外部URLのSVGをそのまま使わず、SVGコードをコピーしてインライン化するか自分のホストにコピーしてから参照することをすすめます。
SVGのファイルサイズが大きいとき、インライン化してもページが重くなりませんか？
SVGO（SVG Optimizer）を使うと、SVGのファイルサイズを平均50〜70%削減できます。インライン化前にSVGOで最適化してからHTMLに貼り付けることで、表示の安定性を維持したままサイズの問題を解消できます。