SVG images are displayed in a rectangular space defined by the Cartesian coordinate system. The center of a Cartesian space is the geometric center of the space. In coordinates this is known as (0,0) - the x and y coordinates.
However, SVG coordinates begin at the top-left corner and finish at the bottom-right corner. The starting corner is known as (0,0).
In this example a box is drawn around the space to help visualize it.
All coordinates are from the top-left corner (0,0).
SVG 'paths' are defined by several variables, such as 'M' and 'L', defined in a quoted string named 'd'.
For example, the blue line from the center to the upper-right corner of the square was created using the SVG command
The 'M250,250' indicates where a virtual pen is to MoveTo. In this case the pen is moved to the center of the square. The numbers indicate the x and y coordinates.
The 'L500,0' indicates the pen will draw a Line from the previous point (250,250) to the point (500,0).