This SVG example illustrates how to change the orientation of the coordinate system with a transformation. Note that other transformations are used to flip text and place it.

ChangingOrientation.svg

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-2 -2 4 4">
  <!-- Flip the y-axis so that (-2, -2) is in the lower-left corner, as expected -->
  <g transform="scale(1,-1)">
    <circle cx="-1" cy="-1" r=".15" fill="black" stroke="none" />
    <!-- This flip is used on the text to make sure that it is not upside-down -->
    <text  transform="translate(-1.4, -1.5) scale(1,-1)" x="0" y="0" font-size=".25" fill="black">(-1, -1)</text>
    <circle cx="1" cy="1" r=".15" fill="red" stroke="none" />
    <text  transform="translate(.7, .5) scale(1,-1)" x="0" y="0" font-size=".25" fill="red">(1, 1)</text>
    <circle cx="1" cy="-1" r=".15" fill="green" stroke="none" />
    <text  transform="translate(.65, -1.5) scale(1,-1)" x="0" y="0" font-size=".25" fill="green">(1, -1)</text>
    <circle cx="-1" cy="1" r=".15" fill="blue" stroke="none" />
    <text  transform="translate(-1.35, .5) scale(1,-1)" x="0" y="0" font-size=".25" fill="blue">(-1, 1)</text>
  </g>
</svg>

Output