SVG Coordinate System

Like many computer graphics used, SVG also uses a grid coordinate system. This coordinate system has the following characteristics: The origin of the coordinate system is at the upper left corner (0,0), the positive direction of the X-axis is to the right, starting from the point (0,0), x gradually increases. The positive direction of the Y-axis is downward, starting from the point (0,0), y gradually increases. Coordinates are in pixels

The coordinate system of SVG (and most other computer graphics) is slightly different from the coordinate system of mathematics, graphics, etc.

　Mathematics/Cartesian coordinate system

In the rectangular coordinate system, the point x=0, y=0 is located at the lower left corner of the figure. As x increases, the point moves to the right in the coordinate system. When x decreases, the point moves to the left in the coordinate system. As y increases, the point moves upward in the coordinate system. When y decreases, the point moves downward in the coordinate system.

This is a diagram of a common graphic coordinate system, with the lower left corner as the origin (0,0):

SVG coordinate system

In the SVG coordinate system, the point x=0, y=0 is at the upper left. Therefore, compared with the ordinary graphic coordinate system, the y-axis is reversed. As y increases in SVG, points, shapes, etc. move downward instead of upward.

This is a diagram of the SVG coordinate system, with the origin (0,0) at the upper left:

coordinate system unit

can specify in the SVG coordinate system1The corresponding unit of a unit. You can perform this operation at any location where coordinates (x and y positions, width and height, etc.) can be specified. You can specify the unit after the value, for example10cm or125mm.

If no unit is specified after the coordinate value, the unit is assumed to be pixels (px).

This is the list of units that can be used with SVG elements:

The units set on the <svg> element in the width and height attributes only affect the <svg> element (viewport). Shapes within the <svg> element must set their own units. Similarly, if no units are specified, the default unit is pixels.