HTML SVGのwidth/height指定とレスポンシブ対応を徹底解説！初心者でもわかる方法

HTML SVGのwidth/height指定とレスポンシブ対応

先生と生徒の会話形式で理解しよう

生徒

「先生、SVGの画像をHTMLに表示するとき、widthやheightって何のために指定するんですか？」

先生

「SVGはベクター形式の画像で、ピクセルに依存せず自由に拡大縮小できるのです。widthやheightを指定すると表示サイズを決められます。」

生徒

「でも、スマホやタブレットで見るとサイズが崩れることがあります。どうしたらいいですか？」

先生

「その場合はレスポンシブ対応、つまり画面サイズに合わせてSVGのサイズを自動調整する方法を使うと便利です。」

1. SVGのwidthとheightとは？

HTMLでSVG画像を表示するとき、widthとheightは画像の横幅と高さを指定する属性です。例えば幅を300px、高さを150pxにすると、常にそのサイズで表示されます。


<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="150" fill="skyblue"/>
</svg>

ブラウザ表示

2. widthやheightを指定するときの注意点

固定サイズにすると、画面が小さいスマホで見ると画像がはみ出すことがあります。逆に大きすぎるとパソコンの画面では小さく見えます。固定サイズは便利ですが、レスポンシブ対応の工夫も必要です。

3. レスポンシブ対応の基本方法

SVGを画面サイズに合わせて自動で拡大縮小させるには、widthとheightを指定せず、viewBoxを使う方法が一般的です。viewBoxは「SVGの座標空間」を決める属性です。


<svg viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="150" fill="lightgreen"/>
</svg>

ブラウザ表示

このようにすると、SVGは親要素の幅に合わせて自動でサイズが変わります。

4. CSSでさらにレスポンシブにする方法

SVGをより自由に調整したい場合は、CSSで幅を100%に指定すると便利です。高さは自動で比率を保つように設定します。


<svg viewBox="0 0 300 150" style="width:100%; height:auto;" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="150" fill="pink"/>
</svg>

ブラウザ表示

こうすることで、スマホでもパソコンでも画像が画面幅に合わせて表示され、見やすくなります。

5. width/heightとviewBoxの組み合わせ例

固定サイズとレスポンシブの両方を組み合わせることもできます。例えば最大幅を300pxに制限しつつ、画面が小さい場合は自動で縮小する設定です。


<svg viewBox="0 0 300 150" style="max-width:300px; width:100%; height:auto;" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="75" r="70" fill="orange"/>
</svg>

ブラウザ表示

この方法なら、画面が広いパソコンでは最大サイズ、狭いスマホでは自動縮小と、両方のメリットを得られます。

6. SVG画像のアイコン化とレスポンシブ

SVGはアイコンとしても便利です。Bootstrapのナビゲーションやボタンに使う場合、レスポンシブ設定で画面サイズに応じて自動縮小できます。


<svg viewBox="0 0 120 120" style="width:50px; height:50px;" xmlns="http://www.w3.org/2000/svg">
    <rect width="120" height="120" fill="purple"/>
</svg>
<svg viewBox="0 0 120 120" style="width:25px; height:25px;" xmlns="http://www.w3.org/2000/svg">
    <rect width="120" height="120" fill="purple"/>
</svg>

ブラウザ表示

このように同じSVGでも、画面や用途に応じてサイズを変えることで、デザインを統一しつつ見やすく配置できます。

7. SVGをHTMLで扱うときのまとめ的ポイント

width/heightは固定サイズを指定するときに使う
viewBoxを使うとレスポンシブに対応できる
CSSでwidth:100%; height:auto;を指定すると画面幅に合わせて自動調整
アイコンや装飾用SVGはサイズを変えつつ統一感を保つことが可能

この基本を押さえておくと、HTMLでSVGを扱うときに、スマホやパソコンなどあらゆる画面サイズに対応できるようになります。

8. SVGの拡張例：複数図形を組み合わせる

SVGでは複数の図形を組み合わせて、1つの画像として表示することもできます。レスポンシブ設定を組み合わせれば、複雑なアイコンやバナーも自動で画面サイズに合わせられます。


<svg viewBox="0 0 300 150" style="width:100%; height:auto;" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="150" fill="lightblue"/>
    <circle cx="150" cy="75" r="50" fill="red"/>
    <text x="150" y="85" font-size="20" text-anchor="middle" fill="white">SVG</text>
</svg>

ブラウザ表示

このようにすると、SVGだけでバナーや簡易ロゴを作成し、どの画面でも見やすく表示可能です。

9. SVGをスマホ・タブレットに最適化するコツ

レスポンシブ対応のSVGは、画面幅に合わせて拡大縮小されますが、文字や細かい図形は小さくなりすぎることがあります。その場合は最小サイズをCSSで指定するか、重要な情報は中央に配置することで、見やすさを確保できます。


<svg viewBox="0 0 300 150" style="width:100%; height:auto; min-width:150px;" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="150" fill="yellow"/>
</svg>

ブラウザ表示

これでスマホやタブレットでも見やすく、操作性も確保できます。

2026年最新スキルアップ・実践セミナー