The grey coordinates (grey ruler 800 x 600) represent the coordinates of the viewport established on the <svg> element using the width and height attributes.

element using the and attributes. The blue coordinate system is the user coordinate system established on the SVG canvas —where all the drawing will be done—using the viewBox attribute on the <svg> element.

coordinate system is the user coordinate system established on the —where all the drawing will be done—using the attribute on the element. The orange vertical line represents the position of the <min-x> value of the viewBox .

vertical line represents the position of the value of the . The dotted orange lines to the right of min-x represent the mid-x and max-x positions of the viewBox , respectively.

, respectively. The purple horizontal line represents the position of the <min-y> value.

horizontal line represents the position of the value. The dotted purple lines below the min-y represent the mid-y and max-y positions of the viewBox , respectively.

When the min-x and min-y values change, the mid-x, max-x, mid-y, and max-y values change accordingly.

The “show x & y guidelines” option allows you to show and hide the above mentioned lines to better visualize the position of the viewBox with respect to the viewport.