[javajosh]

I like it! But instead of modifying your data to suit SVG's default coordinate system, I suggest using a top-level "g" tag with a "transform/scale" attribute. Like this:

   <svg class="natural-units"
     width="200px" height="200px"
     viewBox="-1 -1 2 2"
   >
     <desc>A static svg unit circle</desc>
     <g transform="scale(1,-1)">
     <circle class='unit-circle' r="1" fill="none" stroke-width=".001 "/>
  </g>

</svg>

Example adapted from: https://simpatico.io/svg.md#naturalunits

In this way you can use the intuition about the coordinate system that you built in school.

[bla3]

Doesn't this flip all text in the SVG upside down?

[javajosh]

Alas, yes. And you have to reflip it with another g/scale. But such is life!

[ComputerGuru]

A bigger problem is that it breaks text rendering. Transforms turn off pixel snapping in the hinting engine so you’ll get blurry text or lines.

(At least if you applied it as a css transform you would. Maybe if you did it natively in svg you wouldn’t?)