ビューポート

SVG／ビューポート

SVGが描画する平面は、論理的には無限の広さがあります。その平面上で実際に描画する四角の範囲をビューポート（Viewport）と呼びます。ビューポートはSVG要素のwidth、height属性にそのサイズを指定します。

width	幅
height	高さ

ビューボックス（ViewBox）

ビューポートは描画範囲を物理的な単位を持つ距離で決定します。SVG要素のviewBox属性に設定すると、ビューポートの範囲を論理座標系（ビューボックス）に置き換えることができます。

viewBox="x, y, width, height"

x, yは論理座標の左上の座標値で、width, heightは座標系単位での幅と高さを設定します。
viewBoxを設定した場合は、各種グラフィックの座標や長さの値には、論理座標の数値のみで指定できます。また、その座標系の中でも「px」のような現実の単位を付けた値も使うことができます。

下の例では、物理的には10cm四方の描画領域を、viewBoxで0～100の論理座標に置き換えるので、グラフィックに指定する距離「1」は現実の1mmに相当します。

※ 本稿記事内のサンプルは統一してこの座標系を使っています。

ビューボックスのアスペクト比

viewBoxは、デフォルトではビューポートで指定する範囲の縦横比率（アスペクト比）に合わせて伸縮しません。ビューポートの矩形の中に「内接するように」座標系（ビューボックス）が配置されます。
例えば次のように、10cmの正方形のビューポートに、1:2の縦長の座標系を与えた場合、その座標系は10cmの正方形の中に縦が内接するように配置されるので、幅は10cmの中心から半分だけになります。

配置方法は、preserveAspectRatio属性で変更できます。

preserveAspectRatio="xMinYMid"	左に寄せて配置
preserveAspectRatio="xMaxYMid"	右に寄せて配置
preserveAspectRatio="xMidYMin"	上に寄せて配置
preserveAspectRatio="xMidYMax"	下に寄せて配置
preserveAspectRatio="none"	ビューポートのアスペクト比に合わせる

reserveAspectRatio="none"の場合は、ビューポートのアスペクト比に合わせて縦と横の座標系が独立して伸縮し、ビューポートの範囲とビューボックスの座標系が一致します。