初期表示

SVG文書片の初期表示領域や大きさは、ビューポートとビューボックスによって決まります。
ビューポートは、SVG文書片の内容を描く矩形領域です。また、ビューボックスは、SVG文書片中の表示される領域です。

SVG文書片が他の文書に埋め込まれていない場合には、svg要素のwidth属性およびheight属性によってビューポートの幅、高さが指定されます。

ビューボックスが指定されていない場合、初期に表示されるSVGの領域は、左上の頂点の座標を(0,0)として、SVGの座標系での1単位がビューポートの1ピクセルと等しくなるように設定された領域になります。すなわち、左上の頂点の座標が(0,0)、幅および高さがそれぞれビューポートの幅および高さのピクセル数に等しい領域となります。

例えば、
<svg width="240" height="320">
のように書けば、ビューポートの幅および高さはそれぞれ240、320になります。また、初期表示される領域は、(0,0)(240,0)(240,320)(0,320)に囲まれる矩形領域になります。

ビューボックスを指定することで、表示領域のピクセル数よりも大きな座標値を持つSVG文書片の全体を表示することや、小さな座標値の範囲に記述されたSVG文書片の内容を表示領域全体に拡大して表示することができます。

ビューボックスは、svg要素のviewBox属性によって指定されます。

例えば、
<svg width="240" height="320" viewBox="0 0 480 640">
のように書けば、ビューポートの幅および高さはそれぞれ240、320になります。また、初期表示される領域は(0,0)(480,0)(480,640)(0,640)に囲まれる矩形領域になり、ビューポートにあてはめるために縮小されて表示されます。