SVG(和大多数其他计算机图形)的坐标系与数学，图形等的坐标系略有不同。

数学/笛卡尔坐标系

在正常的笛卡尔坐标系中，点x = 0，y = 0位于图形的左下角。随着x的增加，点将在坐标系中向右移动。当x减小时，点将移至坐标系中的左侧。随着y的增加，点在坐标系中向上移动。当y减小时，点在坐标系中向下移动。

这是一个普通图形坐标系的图示，左下角的坐标为0,0：

SVG坐标系

在SVG坐标系中，点x = 0，y = 0是左上角。因此，与法线图坐标系相比，y轴反转了。随着SVG中y的增加，点，形状等将向下移动，而不是向上移动。

这是一个SVG坐标系的图示，其左上角为0,0：

<％-y轴-％> <％-箭头-％> <％-x轴-％> <％-箭头-％>

坐标系单位

我们可以指定SVG坐标系中对应的1个单位。我们可以在所有可以指定坐标的位置(" x"和" y"位置，" width"和" height"等)进行操作。我们可以在值后指定单位，例如" 10cm"或者" 125mm"。

如果我们没有在坐标值后指定任何单位，则该单位被假定为像素(px)。

这是可以与SVG元素一起使用的单位的列表：

在width和height属性中的<svg>元素上设置的单位仅会影响<svg>元素(视口)。 <svg>元素内的形状必须设置自己的单位。同样，如果未指定单位，则默认单位为像素。