viewBox属性でSVGをレスポンシブ対応させる

Webサイトで利用する画像フォーマットとして拡大・縮小しても劣化しなく軽量なデータなので、SVGはこれからのWebサイトで多く利用されていくでしょう。そんな中、SVGの利用にあたって少し手こずるのが様々なデバイスで利用するためのレスポンシブ対応です。

SVGをレスポンシブ対応させるにはviewBox属性を利用します。

viewBox属性はレスポンシブ対応する際に利用するviewport（ビューポート）と同じ働きをします。
viewportは画面サイズの表示領域での指定をしていきますがviewBox相対的な表示領域、要するにSVGの領域でコンテンツを描画します。

SVGをwidthやheightで幅と高さを指定してCSSで親要素に%などで幅の可変に対応しようとしても、描画される領域はwidthやheightで指定した数値になりますので幅と高さが足りていないと表示が途切れたりします。これはSVG要素はHTMLの空間とは違い、SVGの空間で描画するためです。

ですのでレスポンシブ対応するにはviewBox属性でSVG空間に描画の領域を指定していかなくてはいけません。
そしてviewBox属性で表示領域を指定した後にCSSで可変などに対応したスタイルを記述していきます。

ちなみにviewBox属性は以下の要素で使うことができます。

viewBox属性の記述は「<min-x>, <min-y>, <width>, <height>」の4つの数値で設定します。
min-xは「X座標の最小値」、min-yは「Y座標の最小値」であとは幅と高さの指定となります。座標に関してはSVGで凝ったデザインを作成するときくらいしか設定しないかと思います。普通に画像をSVGコードでHTMLに表示するときは0として大丈夫です。

記述例

<svg viewBox="0 0 315 98">

WebデザインはPhotoshopまたはIllustratorで画像やアイコンを作成していくかと思います。
PhotoshopやIllustratorでのSVGコードの生成については、以下の記事でご紹介しています。

PhotoshopやIllustratorで画像をSVG形式で書き出す方法

IllustratorでSVGコードを生成すれば自動的にviewBox属性が設定されますが、PhotoshopでSVGコードを生成した場合はwightとheightのみが設定されます。
それを踏まえて、viewBox属性を使ったレスポンシブ対応を見ていきましょう。

PhotoshopのSVGコード

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="315px" height="98px">
<path fill-rule="evenodd"  fill="rgb(236, 107, 23)"
 d="M296.195,53.514 C296.690,59.452 299.040,....,15.848 L50.568,23.481 L49.974,24.858 Z"/>
</svg>

PhotoshopでSVGコードを生成すると、widthとheightが書き出しサイズで設定されます。これだとHTMLとしてのサイズしていとなってしまいますので、CSSでサイズの可変対応を行って拡大・縮小、特に縮小させると幅と高さが足りずに画像が切れてしまいます。

viewBox属性を利用しSVG要素の領域でサイズを指定して可変しても拡大・縮小された領域での描画するように対応する必要があります。

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 315 98">
<path fill-rule="evenodd"  fill="rgb(236, 107, 23)"
 d="M296.195,53.514 C296.690,59.452 299.040,....,15.848 L50.568,23.481 L49.974,24.858 Z"/>
</svg>

widthやheightがsvg要素に直接記述してあるとCSSでのスタイルの変更に「!important」を利用して対応していかなくてはならなくなり今後のスタイル変更に影響を与えかねないので、widthやheightの指定は削除して変わりにviewBox属性を設定します。

そしてviewBox属性でサイズを設定した状態で、CSSのメディアクエリ等を利用してサイズの調整や%（パーセント）指定での可変対応を行ってください。

IllustratorのSVGコード

IllustratorでSVGコードを生成すると、widthやheightの設定と同時に自動でviewBox属性が設定されます。

<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="639.2px"
	 height="197.5px" viewBox="0 0 639.2 197.5" style="enable-background:new 0 0 639.2 197.5;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#EC6B18;}
</style>
<defs>
</defs>
<g>
	<path class="st0" d="M52.2,80.6h16.2c7.5,0,15.3-0.7,....,0.9-6c0-3.3-1.8-5.4-5.3-6.2c-3.5-0.8-12.3-1.2-26.3-1.2h-7.3
		L52.2,80.6z"/>

	... more code
</g>
</svg>

viewBox属性が設定されているのはいいですが、widthやheightがsvg要素に直接記述してあるとPhotoshopで説明したのと同じでCSSでのスタイルの変更に「!important」を利用して対応していかなくてはいけなくなるので、widthやheightの指定は削除した方が良いでしょう。

<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 639.2 197.5" style="enable-background:new 0 0 639.2 197.5;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#EC6B18;}
</style>
<defs>
</defs>
<g>
	<path class="st0" d="M52.2,80.6h16.2c7.5,0,15.3-0.7,....,0.9-6c0-3.3-1.8-5.4-5.3-6.2c-3.5-0.8-12.3-1.2-26.3-1.2h-7.3
		L52.2,80.6z"/>

	... more code
</g>
</svg>

あとはCSSのメディアクエリ等でPCやモバイル端末のサイズ指定、可変対応を行っていきます。