SVG 座標系

多くのコンピュータグラフィックスで使用される座標系と同様に、SVGもグリッド座標系を使用しています。この座標系には以下の特徴があります：左上隅が座標系の原点（0,0）で、X軸の正方向は右に向いて、0,0から右に向かってxが徐々に増えます。Y軸の正方向は下に向いて、0,0から下に向かってyが徐々に増えます。座標はピクセル単位で指定されます

SVG（およびほとんどの他のコンピュータグラフィック）の座標系は、数学やグラフィックなどの座標系と少し異なります。

　数学/カールス・ガウス座標系

直角座標系では、点x=0、y=0が図形の左下隅に位置します。xが増えると、点が座標系内で右に動きます。xが減ると、点が座標系内で左に動きます。yが増えると、点が座標系内で上に動きます。yが減ると、点が座標系内で下に動きます。

これは通常のグラフィック座標系の図示で、左下隅が0,0です：

SVG座標系

SVG座標系では、点x=0、y=0が左上隅です。したがって、通常のグラフィック座標系と比較して、y軸は逆です。SVGでのyが増えると、点、形状などが下に動きますが、上に動くわけではありません。

これはSVG座標系の図示です、左上隅の0,0：

座標系単位

SVG座標系で指定できます1個単位に対応する単位です。座標（xおよびyの位置、widthおよびheightなど）を指定できる場所でこの操作を実行できます。値の後に単位を指定できます、例えば10cmまたは125mm。

座標値の後に単位が指定されていない場合、その単位はピクセル(px)と仮定されます。

これはSVG要素と一緒に使用できる単位の一覧です：

<svg>のwidthおよびheight属性で要素上に設定される単位は、その<svg>要素（視口）にのみ影響を与えます。<svg>要素内の形状は、自分自身の単位を設定する必要があります。同様に、単位が指定されていない場合、デフォルトの単位はピクセル(px)です。