Bevor es nun daran geht, tatsächlich SVG-Grafiken zu erstellen, sollte noch ein Wort zu dem Koordinatensystem verloren werden.

Die Elemente einer Grafik, zum Beispiel ein Rechteck oder Kreis, müssen meistens absolut positioniert werden, die Reihenfolge, in der sie im Code auftauchen, spielt keine Rolle für ihre Positionierung. Das steht im Gegensatz zu HTML, wo die Element ohne weitere Positionierungsangaben in Leserichtung von links oben nach rechts unten angeordnet werden. Wenn ein SVG-Element keine Positionierungsangaben besitzt, wird es automatisch an den Koordinaten x=0, y=0 platziert.

Das Koordinatensystem ist wie unten abgebildet aufgebaut, der Nullpunkt liegt wie bei den meisten Grafikformaten links oben. Die Zeichnungsfläche oder canvas der SVG ist unbegrenzt nach rechts und unten, d.h. die Elemente können beliebig im positiven Bereich positioniert werden. Die sichtbare Fläche, bzw. der viewport, beschränkt das canvas auf den Bereich, der tatsächlich im user agent (SVG Viewer, z. B. ein Browser) angezeigt wird. Nur dieser Teil wird tatsächlich gerendert. Die Größe des viewports wird z. B. über das HTML-Dokument, das die SVG einbettet, bestimmt, nämlich durch die Angaben "width" und "height" des einbettenden Elements (z.B. <EMBED> oder <OBJECT>, siehe Kapitel 2.2 SVG einbetten. Der Ursprung des viewport und des canvas liegen stets aufeinander. Im in der Darstellung aufgezeigten Beispiel könnte der einbettende Code wie folgt aussehen:

<OBJECT width="400" height="300" type="image/svg+xml" data="einegrafik.svg">
</OBJECT>

Es gibt die Möglichkeit, eigene Koordinatensysteme, genannt user-Koordinantensysteme, zu definieren, welche durch Gruppen von Elementen dargestellt werden. Dazu sollte das Kapitel 2.5.2 strukturierende Elemente gelesen werden. Diese Gruppen, bzw. Koordinatensysteme und damit deren Ursprung können transformiert werden (siehe Kapitel 2.4.2 positionierende Attribute).