---
title: "SVGが表示されない問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLでSVGが表示されない問題を防ぎたい制作者向け。viewBox指定・インライン化・SVGOによる最適化まで、AIへのプロンプトに盛り込むべき指示文と、生成後に確認すべきポイントを具体的に説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/svg-not-showing-ai-prompt"
markdown: "https://giga-site.com/articles/svg-not-showing-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# SVGが表示されない問題をAI生成HTMLで防ぐプロンプト
AIにSVGを含むHTMLを生成させると、viewBoxが未指定だったり外部ファイルへのパスが存在しなかったりと、ローカルでは動くのにブラウザで何も出ない状態になりやすいです。プロンプトでSVGの記述ルールを明示するだけで、生成されたHTMLのSVG表示の安定性が格段に向上します。
> Source HTML: https://giga-site.com/articles/svg-not-showing-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
AI（ChatGPT・Claudeなど）がHTMLにSVGを生成するとき、外部.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「`内に``があるか確認し、ファイル自体もUTF-8で保存されているかテキストエディタで確認してください。
### AIに「アイコンをSVGで作って」と頼むと、どのくらいの精度で使えるSVGが出ますか？
シンプルな図形（矢印・チェックマーク・ハンバーガーメニューなど）なら高精度で使えるSVGが生成されます。複雑なイラストや写実的な絵はSVGより画像フォーマットの方が適しており、AIもSVGでは対応が難しいと判断することが多いです。
### フォントアイコン（Font Awesome等）とSVGアイコンはどちらがAI生成HTMLに向いていますか？
Font AwesomeはCDN依存があり、CDNがオフラインだとアイコンが表示されません。インラインSVGは外部依存なしで表示できるため、ギガサイト便のような静的HTML配布環境ではインラインSVGの方が安定しています。
## 関連記事
- [SVGが表示されないときの原因と直し方](https://giga-site.com/articles/svg-not-showing-fix/index.md)
- [SVGが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/svg-not-showing-checklist/index.md)
- [SVGが表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/svg-not-showing-request-message/index.md)
- [WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/webp-not-showing-ai-prompt/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [WebP画像が表示されないときの原因と直し方](https://giga-site.com/articles/webp-not-showing-fix/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "SVGが表示されない問題をAI生成HTMLで防ぐプロンプト",
"description": "AI生成HTMLでSVGが表示されない問題を防ぎたい制作者向け。viewBox指定・インライン化・SVGOによる最適化まで、AIへのプロンプトに盛り込むべき指示文と、生成後に確認すべきポイントを具体的に説明します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/svg-not-showing-ai-prompt",
"url": "https://giga-site.com/articles/svg-not-showing-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIが生成したSVGがHTMLに貼り付けると文字化けするのはなぜですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTMLファイルの文字コードがUTF-8でないと、SVG内の日本語テキストが化けることがあります。HTMLの``内に``があるか確認し、ファイル自体もUTF-8で保存されているかテキストエディタで確認してください。"
}
},
{
"@type": "Question",
"name": "AIに「アイコンをSVGで作って」と頼むと、どのくらいの精度で使えるSVGが出ますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "シンプルな図形（矢印・チェックマーク・ハンバーガーメニューなど）なら高精度で使えるSVGが生成されます。複雑なイラストや写実的な絵はSVGより画像フォーマットの方が適しており、AIもSVGでは対応が難しいと判断することが多いです。"
}
},
{
"@type": "Question",
"name": "フォントアイコン（Font Awesome等）とSVGアイコンはどちらがAI生成HTMLに向いていますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "Font AwesomeはCDN依存があり、CDNがオフラインだとアイコンが表示されません。インラインSVGは外部依存なしで表示できるため、ギガサイト便のような静的HTML配布環境ではインラインSVGの方が安定しています。"
}
}
]
}
```