吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】レスポンシブ対応してみた

2015年2月16日 / category : svg

SVGをそれぞれの埋め込みパターンで、レスポンシブ対応をしてみた。
埋め込みパターンは次の6パターン

1.svgタグによる埋め込み
2.背景画像として埋め込み(CSS)
3.objectタグによる埋め込み
4.embedタグによる埋め込み
5.iframeタグによる埋め込み
6.imgタグによる埋め込み

結果から言うと、全てのパターンをCSSのみでうまくレスポンシブ対応できた。
検証したブラウザは下記です。

IE9 / IE10 / IE11 / Chrome / Firefox / iOS8 / Android4 / Safari7 / Safari5

下記URLがそのデモになります。

DEMO

通常のレスポンシブ対応のCSSの記述だとうまくいかなかったので、以前記事にした下記の方法で対応しました。

【レスポンシブコーディング】要素の横幅と高さの比率を保つ

特に、Safari5は、通常のレスポンシブ対応のCSSの記述だとうまくレスポンシブしてくれません。。。

CSS – svgを埋め込んでいる要素の親要素
親要素{
	position: relative;
	width: 80%;
	height: 100%;
	margin: 0 auto;
	padding: 85% 0 0;
	background: #eee;
}

width: 80%;
これはステージ横幅の100%に対して、80%ということです。

padding: 85% 0 0;
これは少々目分量ですが、svgファイルのサイズが横100px、縦105pxなので、横80%に対して、少し割合を大きくした数値85%です。
すみません、厳密な数値ではないです。。。

CSS – svgを埋め込んでいる要素
svgを埋め込んでいる要素{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これでレスポンシブ対応はOKのはず!