SVGのビューボックスと表示エリア

SVGの寸法単位(ピクセルやインチ)は意味がない、だってスケーラブルだから。SVG図形が描画される空間は仮想的・理想的な $`{\bf R}^2`$ だと思っていいので、寸法はすべて無次元数で書く。

仮想キャンバスから表示に切り出す部分を viewBox で指定。ビューボックス内が、ホストレンダリング環境の表示エリアに表示される。ホストは物理的だから寸法単位が意味を持つ。ホスト環境(主にブラウザのHTMLレンダリング環境)の表示エリア指定はホスト以前。HTMLなら、width, height でサイズ指定で、位置指定はそのHTML要素の出現に依存して、HTML側の規則に従う。

スケーリングは自動でされるが、ビューボックスとホスト側レンダリングの表示エリアのアスペクト比が異なる場合がある。その取り扱い方は、preserveAspectRatio で指定する。トリミングや伸縮変形が行われる。

ビューボックスのトリミングと、表示エリアでのトリミングの2回のトリミングがある。また、ビューボックス→表示エリアは、論理座標→物理座標変換が入る。