SVGをCSSでレスポンシブにする方法

CSS

SVGファイルをCSSでレスポンシブにする方法を紹介します。

おしゃれなSVGファイルの入手方法や編集方法は、unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順を参考にしてみてください。

SVGをCSSでレスポンシブにする方法

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
...
</svg>

SVGでは、上のように、widthとheightを直接指定することで幅と高さを決めることができますが、
これではレスポンシブになりません。
よって、次のようにします。

widthとheightを削除

<svg viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
...
</svg>

まずは直接値を指定しているwidthとheightを削除します。

viewBox属性を調整する

viewBox属性は、描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定するために使用します。
4つの値を指定します。
順番に左上からのx座標の位置、y座標の位置、width(描画エリアの幅)と,height（描画エリアの高さ)です。

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
...
</svg>

表示するエリアは、width属性とheight属性で指定する場合、viewBox属性の描画エリアのwidthとheightと同じ値にすると描画されるエリアと表示されるエリアがイコールになります。

<svg width="500" height="500" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
...
</svg>

viewBox属性の値を小さくすれば描画エリアのサイズが小さくなることを意味するので、SVGのイメージも小さくなります。

表示エリアは他にもクラスにて指定することができ、レスポンシブにする場合はクラスでwidthとheightを決定しますが、
その場合でもviewBox属性を調整することで見え方が変わるので触ってみて調整しましょう。

SVGタグを囲うコンテナを用意する

<div class="svg__container">
<svg viewBox="0 0 500 500" fill="none"  class="svg__content" xmlns="http://www.w3.org/2000/svg">
...
</svg>
</div>

SVGをレスポンシブにするには、SVGタグに直接レスポンシブ指定してもうまく動きません。
よって、SVGタグを囲うコンテナを用意します。

.svg__container { 
	position: relative;
	width: 100%;
}
.svg__content { 
	position: absolute;
	top: 0;
	left: 0;
}

そして、SVG自体には、contentなどクラスを付与します。
コンテナでは、positionをrelativeに設定し、widthをパーセントで設定することでレスポンシブにできます。
SVG自体のcontentクラスにabsoluteで位置を決めます。

CSS

Posted by devsakaso