なぜSVGは崩れるの？「入れ子」の悩みを解決する3つの護身術とAI依頼用プロンプト

Gemini、SVGコードを枠の中（入れ子）に入れた途端、葉っぱがびよーんって伸びちゃったのはどうして？

それはSVGが「とても素直で、空気を読みすぎる」からなんです（笑）。HTMLとSVGの違いを知ると、その理由がスッキリわかりますよ！

1. HTMLとSVG、何が違うの？
2. 「入れ子」で崩れる正体は「過剰なサービス精神」
3. 解決策：比率を「物理ロック」する
まとめ
1. 🌟 魔法のプロンプト、実際に試してみました！

1. HTMLとSVG、何が違うの？

まず、私たちが普段見ているWebサイトの基本、HTMLとSVGの違いを整理してみましょう。

特徴	HTML（箱の世界）	SVG（図面の世界）
役割	文書の構造を作る	図形を描画する
考え方	文字や画像を「箱」に詰める	座標（x, y）に点を打って繋ぐ
拡大	ぼやけることがある	どこまで拡大してもクッキリ！

HTMLは「積み木」のように要素を積み上げていきますが、SVGは「数学的な設計図」です。だからこそ、デジタル素材として非常に優秀なんです。

2. 「入れ子」で崩れる正体は「過剰なサービス精神」

SVGを <div> などのHTMLタグ（枠）で囲むことを「入れ子にする」と言います。

ここで問題が発生します。WordPressのテーマの多くは、「枠の中に画像やSVGが入ったら、その枠いっぱいに広がりなさい」というCSSの命令（height: 100%など）を持っています。

⚠️ なぜびよーんと伸びるのか？
SVGは設計図なので、枠の高さが勝手に広げられると、「えっ！そんなに高く表示しなきゃいけないの？」と気を利かせて、中身の図形まで縦に引き伸ばしてしまうのです。

3. 解決策：比率を「物理ロック」する

これを防ぐには、SVGに対して「どんなに外側の枠が広がっても、この比率（アスペクト比）だけは絶対に譲らないで！」と命令を出す必要があります。

当サイトのコピペコードで使っている「3つの護身術」がこちら：

aspect-ratio: 幅と高さの比率を固定する最新の呪文。
height: auto !important: 外側からの「高さを変えろ」という命令を「拒否」する設定。
viewBox: 自分の設計図が「何×何」のサイズで作られているかを明示し、形を保つ。

まとめ

SVGはHTMLにそのまま書き込める便利な技術ですが、時々「空気を読みすぎて」形が崩れてしまいます。配布しているコードのように、しっかりと比率ロックをかけてあげることで、どんなブログ環境でも美しく表示されるようになります！

この記事があなたの「庭活」と「Web制作」のお役に立てば幸いです！

✨ 魔法のプロンプト（読者配布用）

このプロンプトをコピーしてAI（Geminiなど）に貼り付けるだけで、「プレビュー」と「コピーボタン」がセットになった配布用カードが完成します！

以下の条件で、ブログ配布用の「SVGデザインユニット」をHTMLコードのみで出力してください。

【モチーフ】
[ここに植物やアイテム名を入力]

【絶対ルール：3つの護身術】
SVGのstyle属性に必ず以下を記述し、WordPressの枠内でも崩れないようにしてください：
1. aspect-ratio: (デザインに合わせた比率);
2. height: auto !important;
3. preserveAspectRatio="xMidYMid meet" をSVGタグに記述

【出力するHTMLの構造】
全体を  で囲み、以下の3要素を順に配置した「単一のHTMLブロック」として出力してください：

① プレビューエリア：作成したSVGを実際に描画。
② 配布コードエリア：タグを使用。中身のSVGコードの「<」は「&lt;」、「>」は「&gt;」に必ず置換して、ソースコードとして表示すること。
③ コピーボタン：②のテキストをコピーするJavaScript機能を備えたボタン。

※余計な解説は不要です。コピーしてそのまま使えるHTMLコードのみを出力してください。