What Are SVG Coordinate Systems?

There are two coordinate systems involved when rendering a graphical object on the SVG canvas:

1. The Canvas Coordinate System - It is a 2-dimensional space used in a "svg" element to define the size of the drawing canvas where all child graphical objects will be rendered.

For example, the following "svg" element defines the drawing canvas with a size of (300, 200) pixels. The background of the canvas will be filled in white color.

<svg xmlns="http://www.w3.org/2000/svg"
  style="background-color: #ffffff"
  width="300" height="200">
  ...
</svg>

2. The Object Coordinate System - It is also a 2-dimensional space used in a graphical object element like "line", "rect", "circle", etc. to define the shape of the object.

For example, the following "ellipse" element defines an ellipse object in the Object Coordinate System with the center point at (0,0), the short radius of 75, the long radius of 100.

<ellipse cx="0" cy="0" rx="75" ry="100" 
  stroke="blue" stroke-width="20" fill="none"/>

⇒ What Is SVG Viewbox-Viewport Mapping

⇐ SVG Coordinates, Size and Viewport

⇑ SVG Coordinates, Size and Viewport

⇑⇑ SVG (Scalable Vector Graphics)