【簡単！】SVG をレスポンシブにする方法

本記事では SVGを Web ページの幅に合わせて、画像の大きさを変える方法を解説します。

SVG（Scalable Vector Graphics）は、ベクター形式の画像フォーマットです。拡大縮小しても画質が劣化しないため、Webデザインにおいて非常に人気があります。

まずは SVG の基本要素を説明します。

SVGの基本要素

SVG要素には、いくつかの重要な属性があります。ここでは、width、height、および viewBox について説明します。

width と height

width と height 属性は、SVG 要素の幅と高さを指定します。これらの値はピクセル単位で指定され、表示される領域のサイズを決定します。

<svg 
    width="400" 
    height="300" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 800 600"
></svg>

上記の例では、SVG要素の幅が 400 ピクセル、高さが 300 ピクセルに設定されています。

viewBox

viewBox 属性は、SVG の内部座標系を指定します。
viewBox は SVG の内部に仮想的なキャンバスを設定し、その中で描画する要素（例えば、<rect> や <circle> など）の位置とサイズを制御するものです。

viewBox は4つの値を持ちます。

<svg viewBox="min-x min-y width height">

• min-x と min-y：仮想キャンバスの左上の座標
• width と height：仮想キャンバスの幅と高さ

<svg viewBox="0 0 200 200" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="80" fill="green" />
</svg>

この例では、viewBox="0 0 200 200" と設定されています。この仮想キャンバスは、実際の表示サイズ（100x100 ピクセル）にかかわらず、SVG の内部では 200x200 の領域として扱われます。

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

レスポンシブにする方法は非常に簡単です。

width と height を明示的に設定しないことです。これにより、SVG は親要素のサイズに応じて自動的に調整されます。

設定した場合、その幅や高さで固定されます。

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="300" height="200" fill="orange" />
</svg>

より細かく設定したい場合、width="80%" のように % 表記を使用します。

<style>
    .svg-container {
        width: 80%; /* 親要素の幅を指定 */
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    svg {
        width: 100%; /* 親要素に合わせて拡大縮小 */
        height: auto; /* アスペクト比を保持 */
    }
</style>

<div class="svg-container">
    <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
        <rect x="50" y="50" width="300" height="200" fill="orange" />
    </svg>
</div>