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

【参考サイト】

• IEにも対応したレスポンシブSVGの作り方 – たんしおどっとねっと