よくある原因
AI（ChatGPT・Claudeなど）がHTMLにSVGを生成するとき、外部.svgファイルへの参照コード（`<img src="icon.svg">`）を書いてくることがあります。しかし生成されたHTMLファイルと同じ場所にicon.svgがない状態で配布されると、SVGが表示されません。AIはファイルの実在を確認せず参照コードを書くため、実際には存在しないファイルへのパスが生成されることがあります。
もうひとつはAIが生成するインラインSVGにviewBox属性が指定されないパターンです。viewBoxがないSVGはwidth/heightを数値で明示しないと表示領域が0になります。AIはwidthとheightをCSSで制御することを前提に省略する場合があり、CSSが想定外の動作をすると消えたように見えます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AI生成HTMLを確認する際は、svgタグをすべてテキスト検索（Ctrl+F「<svg」）で見つけ、各SVGにviewBoxが設定されているかを確認します。設定がない場合は`viewBox="0 0 [width] [height]"`を追加します。数値はSVGコンテンツの描画範囲に合わせますが、不明な場合はAIに「このSVGのviewBoxに適切な値を追加してください」と再生成依頼をかけます。
外部ファイル参照（img src・object data）が生成された場合は、その参照をインラインSVGに変換するようAIに追加指示します。「HTMLの中のSVGを全部インラインに変換し、外部ファイルへの参照を削除してください」と伝えると、ひとつのHTMLファイルだけで完結する構成に作り直してくれます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
共有後にSVGが見えないと報告が来たら、まず自分のブラウザで同じURLを開いて再現するか確認します。再現する場合は実装の問題、再現しない場合は相手のブラウザ固有の問題です。再現しない場合は相手のブラウザバージョンを確認し、SVGの対応状況をチェックします（特に古いAndroid WebViewはインラインSVGの一部機能に制限があります）。
相手に「Chromeの最新版でURLを開いてもSVGが見えませんか？」と確認し、それでも見えない場合はElementsタブで「svgタグが存在するか、存在するが空か」を確認してもらいます。この情報だけで問題の大半を特定できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
SVGを含むHTMLをAIに生成させる際に使えるプロンプト追記文：「SVGはすべてインラインで記述し、外部ファイル参照は一切使わないでください。すべてのsvgタグにviewBox・width・heightを必ず指定してください。SVGのXML構文が正しいことを確認し、閉じタグの欠如がないようにしてください」。
このプロンプトを追記するだけで、外部ファイル参照の問題とviewBox未指定の問題の両方をほぼ防げます。さらにSVGOで最適化する場合は「生成されたSVGはSVGOで最適化済みのコードを出力してください」と追加すると、AIがSVGO-friendlyなコードを意識して書いてくれることがあります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
AIが生成したSVGがHTMLに貼り付けると文字化けするのはなぜですか？
HTMLファイルの文字コードがUTF-8でないと、SVG内の日本語テキストが化けることがあります。HTMLの`<head>`内に`<meta charset="UTF-8">`があるか確認し、ファイル自体もUTF-8で保存されているかテキストエディタで確認してください。
AIに「アイコンをSVGで作って」と頼むと、どのくらいの精度で使えるSVGが出ますか？
シンプルな図形（矢印・チェックマーク・ハンバーガーメニューなど）なら高精度で使えるSVGが生成されます。複雑なイラストや写実的な絵はSVGより画像フォーマットの方が適しており、AIもSVGでは対応が難しいと判断することが多いです。
フォントアイコン（Font Awesome等）とSVGアイコンはどちらがAI生成HTMLに向いていますか？
Font AwesomeはCDN依存があり、CDNがオフラインだとアイコンが表示されません。インラインSVGは外部依存なしで表示できるため、ギガサイト便のような静的HTML配布環境ではインラインSVGの方が安定しています。