サイト制作に関するメモ書き

HOME > HTML・CSS > SVGをレスポンシブに対応する

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をレスポンシブに対応するデモページ
 

【参考サイト】

 

“SVGをレスポンシブに対応する” への1件のコメント

  1. […] SVGをレスポンシブに対応する | cly7796.net […]

コメントを残す

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

▲PAGE TOP