SVGをレスポンシブにする基本は、SVG側にviewBoxを用意し、CSSでwidth: 100%とheight: autoを指定することです。親要素に最大幅を持たせれば、狭い画面では縮み、広い画面では必要以上に拡大しません。
情報確認日：2026年7月27日
結論：まず押さえるポイント
この記事の結論
- SVGに座標系を示すviewBoxを設定する
- 表示幅はCSS、縦横比はheight:autoで制御する
- 最大幅はSVG自身またはラッパーへ指定する
- 装飾画像はaltを空にし、意味のある画像は内容が分かるaltを書く
SVGをCSSでレスポンシブにする方法の基本
viewBox="0 0 800 450"は、SVG内部の座標系が横800・縦450であることを示します。CSSの表示サイズとは別物です。widthとheight属性を外してもviewBoxがあれば比率を計算できます。
preserveAspectRatioの既定値では縦横比が保たれます。ロゴや図版を意図的に変形させたい場合を除き、noneへ変更する必要はありません。
最小の実装例
HTML
<div class="figure">
<img src="/images/diagram.svg" alt="会員登録の3ステップ">
</div>CSS
.figure {
width: min(100%, 50rem);
margin-inline: auto;
}
.figure img {
display: block;
width: 100%;
height: auto;
}SVGファイル側にはviewBoxを設定します。img要素はベースライン由来の余白を避けるためdisplay: blockにしています。
実務で使うときの考え方
インラインSVGの場合
HTMLへ直接置くインラインSVGも同じ考え方です。SVG要素にviewBoxを付け、CSSで幅を制御します。色をCSSから変えたい場合は、塗りをfill: currentColorにすると親のcolorを継承できます。
.icon { width: 1.25em; height: 1.25em; fill: currentColor; }背景画像の場合
背景SVGはbackground-size: containまたはcoverで制御します。内容として読ませる図は背景にせず、imgまたはインラインSVGを使います。
アクセシビリティと表示品質
情報を伝える図は、図の目的が分かるaltを付けます。複雑なグラフは本文にも要点を書きます。ロゴや線画を大きく拡大する場合は、SVG内部の線幅や文字が小さくなりすぎないか実機幅で確認してください。
よくある失敗と直し方
SVGが縮まない
固定のwidth属性や親要素のmin-widthが残っていないか確認します。CSSの詳細度で上書きされている場合もあります。
縦横比が崩れる
widthとheightを両方固定していないか、preserveAspectRatio=”none”が付いていないか確認します。
横にはみ出す
親要素のpaddingを含む幅、長いキャプション、position指定も確認します。SVGだけでなくレイアウト全体が原因のことがあります。
WordPressで使う場合
WordPressのメディアへSVGを直接アップロードできるかは環境によって異なります。SVGはXMLとしてスクリプト等を含められるため、無条件に許可せず、信頼できる作成者とサニタイズ手段を用意します。テーマ同梱のSVGも出所と内容を確認してください。
よくある質問
widthとheight属性は削除すべきですか？
必須ではありません。CSSで上書きしつつviewBoxで比率を維持できます。レイアウトシフト対策として属性値を残す設計もあります。
SVGをbackground-imageにしてもレスポンシブになりますか？
なります。要素の大きさとbackground-sizeを指定します。ただし意味のある画像の代替テキストには向きません。
ロゴがぼやけるのはなぜですか？
SVG内に埋め込まれたラスター画像、filter、細すぎる線、CSS transformの小数配置などを確認してください。
まとめ
SVGのレスポンシブ対応は、viewBoxで内部比率を定義し、CSSのwidthとheight:autoで表示サイズを決めます。最大幅、代替テキスト、WordPressでの安全な取り扱いまで含めて確認してください。