現在のウェブサイトではベクター形式の画像が使われているデザインもよく見かけ、SVGデータを扱うことも多いかと思います。SVG形式のデータをWebページで表示させる時には、img要素を使って外部リソースとして読み込む方法や、object要素を使って外部リソースとして読み込む方法、また、要素の背景画像としてCSSで表示させる方法などいろんなやり方がありますが、その中の一つにsvg要素としてインラインで記述する方法もあります。このインラインで表示されたSVGをレスポンシブ対応をする時には少し注意点が必要となりますので、今回はその辺りについてまとめてみたいと思います。   まずはインラインではなく外部リソースとして読み込む方法のレスポンシブ対応を見ていきます。ここではimg要素を使った方法で、比較的一般に用いられているやり方ですね。jpgやpngなど画像ファイルと同じ扱いになります。ここでは説明の都合上、SVGをラッピングするコンテナ要素も併記しています。

<div class="svg-container">
  <img src="./sample.svg" alt="vector-image">
</div>

  レスポンシブ対応にはCSS側で最大幅が親要素の幅と同じになるように、且つ高さが自動で設定されて元の縦横比を維持するような指定をすることでレスポンシブ対応ができるようになります。この辺りは基本的なものになりますね。この方法でのサンプルはこちらになります。

.svg-container img {
  max-width: 100%;
  height: auto;
}

  続いてインラインでSVGデータを扱う場合ですが、下記のように直接SVGのコードをsvg要素として記述する形になります。このようにすることで、CSSでSVGのスタイルを調整したり、HTTPリクエストの数を減らすことができるなどのメリットがあります。ただ、複雑なSVGデータの場合にはコードが長くなってしまうので注意が必要です。

<div class="svg-container">
  <svg width="400" height="300" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M0.770873395,137.478788.....
    </path>
  </svg>
</div>

  先ほどと同じように親要素の幅が最大幅となるような指定をしてみますが、この状態ですとSVG要素はレスポンシブ対応になってくれません。

.svg-container svg {
  max-width: 100%;
  height: auto;
}

  そこでインラインSVGをレスポンシブ対応にさせる場合には、下記のようにsvg要素にある「width属性」と「height属性」をそのまま削除してあげる必要があります。そして「viewBox属性」の3つ目と4つ目の値に元の幅と高さを指定する形になります。viewBox属性の方は元々値が入っていることがほとんどなので既に値が指定されている場合にはそのままでOKです。

<svg width="400" height="300" viewBox="0 0 800 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
↓
<svg viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  ちなみにviewBox属性はSVGデータの表示位置座標や表示領域のサイズなどを相対的に指定するもので、1つ目の値は表示位置のx座標、2つ目は表示位置のy座標、3つ目は表示領域の幅を、4つ目は表示領域の高さを示しています。ですのでレスポンシブ対応をする場合でもこの部分の指定は必要となります。   svg要素のwidth属性とheight属性が削除した後はCSS側で適宜レスポンシブ対応に必要となるスタイルを指定するだけです。下記では親要素となるコンテナ要素のアスペクト比をsvg要素の比率に固定して、子要素のsvg要素を親要素の表示領域の中でいっぱいに広がるよう絶対配置で表示する例になります。

.svg-container {
  position: relative;
  aspect-ratio: 4 / 3;
}
.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

  これでインラインSVGをレスポンシブ対応にすることができました。サンプルの方はこちらに用意しており、レスポンシブ未対応のものと比較してみてください。  

---

  今回はインラインSVGをレスポンシブ対応にする方法についてまとめてみました。知らないと少しハマりそうな仕様になるので、注意が必要ですね。CSSでスタイルを指定する場合などは外部リソースとしてではなく、インラインで扱うことも多いと思いますので、ぜひ覚えておきたいですね。