viewBox

viewBox 属性は、 SVG ビューポートのユーザースペースの位置と大きさを定義します。

viewBox 属性の値は、min-x、min-y、width、height の 4 つの数値のリストです。min-x と min-y はビューポートの左上の座標を表します。 width と height の数字は寸法を表します。これらの数値は空白やカンマで区切られ、関連する SVG 要素に設定されたビューポートの境界に割り当てられたユーザー空間の矩形を指定します（ブラウザービューポートではありません）。

この属性は以下の SVG 要素で使用することができます。

例

html,
body,
svg {
  height: 100%;
  vertical-align: top;
}
svg:not(:root) {
  display: inline-block;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
  with relative unit such as percentage, the visual size
  of the square looks unchanged regardless of the viewBox
  -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
  with a large viewBox the circle looks small
  as it is using user units for the r attribute:
  4 resolved against 100 as set in the viewBox
  -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  with relative unit such as percentage, the visual size
  of the square looks unchanged regardless of the viewBox
  -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
  with a small viewBox the circle looks large
  as it is using user units for the r attribute:
  4 resolved against 10 as set in the viewBox
  -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  The point of coordinate 0,0 is now in the center of the viewport,
  and 100% is still resolve to a width or height of 10 user units so
  the rectangle looks shifted to the bottom/right corner of the viewport
  -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
  With the point of coordinate 0,0 in the center of the viewport the
  value 50% is resolve to 5 which means the center of the circle is
  in the bottom/right corner of the viewport.
  -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

この属性の正確な効果は preserveAspectRatio 属性に影響されます。

メモ: width または height に 0 以下の値を指定すると、要素の描画が無効になります。

marker

<marker> の場合、 viewBox は <marker> 要素のコンテンツの位置と寸法を定義します。

値	<number>,? <number>,? <number>,? <number>
既定値	none
アニメーション	可

pattern

<pattern> の場合、 viewBox はパターンタイルのコンテンツの位置と寸法を定義します。

値	<number>,? <number>,? <number>,? <number>
既定値	none
アニメーション	可

svg

<svg> の場合、 viewBox は <svg> 要素のコンテンツの位置と寸法を定義します。

値	<number>,? <number>,? <number>,? <number>
既定値	none
アニメーション	可

symbol

<symbol> の場合、 viewBox は <symbol> 要素のコンテンツの位置と寸法を定義します。

値	<number>,? <number>,? <number>,? <number>
既定値	none
アニメーション	可

view

<view> の場合、 viewBox は <view> 要素のコンテンツの位置と寸法を定義します。

値	<number>,? <number>,? <number>,? <number>
既定値	none
アニメーション	可

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # ViewBoxAttribute