viewBox

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

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

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

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 または height0 以下の値を指定すると、要素の描画が無効になります。

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