SVGをレスポンシブに対応する

SVGをレスポンシブに対応させる際に少し手間取ったので、対応方法をメモしておきます。

うまくいかなかった場合

まずはうまくいかなかったコードです。

HTML

<div class="contents">
	<svg width="400" height="400" viewBox="0 0 400 400">
		<circle cx="200" cy="200" r="200" fill="#ccc" />
	</svg>
</div>

CSS

.contents {
	max-width: 400px;
	margin: auto;
}
.contents svg {
	width: 100%;
	height: auto;
}

SVGにwidth: 100%; height: auto;でいけるかと思ったのですが、IEでうまく表示できていませんでした。
SVGのレスポンシブ対応でうまくいかなかった場合のデモページ
 

うまくいった場合

iframeなどのレスポンシブ対応と同様の方法で対応できました。

HTML

<div class="contents">
	<div class="svg-wrapper">
		<svg width="400" height="400" viewBox="0 0 400 400">
			<circle cx="200" cy="200" r="200" fill="#ccc" />
		</svg>
	</div>
</div>

CSS

.contents {
	max-width: 400px;
	margin: auto;
}
.svg-wrapper {
	position: relative;
	width: 100%;
	padding-top: 100%; /* SVG高さ / SVG幅 * 100 */
}
.svg-wrapper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

SVGをレスポンシブに対応するデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031