Understanding SVG coordinate system

I have difficulties understanding the coordinate system for SVG shapes on my viewBox. In Inkscape i have set the page size to A4-Paper size (Width = 793.70079, Height = 1122.51969) and i have a rectangle with 100×100 side. When i move the rectangle in Inkscape upwards as you can see in the first picture below the y-coordinate is growing, while moving downwards decreases the Y value. This seems for me in contrary to the concept that upleft-corner is set to (0, 0) and Y increases towards the bottom of the page.

Rect towards topleft:

enter image description here

Rect towards bottomleft:

enter image description here

And more specifically the (0, 0) point of my viewBox seems to be the bottomleft corner rather than the topleft (which also seems to apply to my rectangle, so that setting it’s (x, y) to (0, 0) puts it at the bottomleft corner). Can someone point me to what i am missing?


It has nothing to do with the SVG format. It’s just a little quirkiness of Inkscape’s co-ordinate system. The page origin is at the bottom left, and the object origin is the same, which is as you say counter intuitive.

Not to worry though, you can find the real SVG co-ordinates in the XML editor. Just open it up using Shift+CTRL+X, and select the object, and you will see the real SVG co-ordinates. You can also set the real co-ordinates in the XML editor if required.

For example:

enter image description here

Source : Link , Question Author : Community , Answer Author : Billy Kerr

Leave a Comment