src/images/alchi.math.subtraction-1-2--1.svg

<svg title="subtraction"
  viewBox="0 0 390 240"
  xmlns="http://www.w3.org/2000/svg"
  >
  <defs>
    <style type="text/css">
        svg { --fg: black; --bg: white; } /* light mode */

        .fig1 .stroke {
          stroke-width: 2;
          stroke: black; /* fallback when css variables are not supported */
          stroke: var(--fg);
        }

        .nofill {
          fill: none;
        }

        .fillbg {
          fill: white;
          fill: var(--bg);
        }

        .fillfg {
          fill: black;
          fill: var(--fg);
        }
      </style>
  </defs>
  <g class="fig1">
    <g display="none" title="debug">
      <rect title="viewbox" x="0" y="0" width="390" height="240" stroke="red" stroke-width="1" fill="none" />
      <rect title="inner box" width="310" height="160" transform="translate(-155 -55) translate(195 95)" stroke="red" stroke-width="1" fill="none" />
      <line title="ycenter" transform="translate(0 115)" x1="0" x2="390" y1="0" y2="0" stroke="red" stroke-width="1"/>
      <line title="xcenter" x1="195" x2="195" y1="0" y2="190" stroke="red" stroke-width="1"/>
    </g>
    <g title="">
      <g title="" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40" fill="black" class="fillfg">
        <!-- TODO remove transform -->
        <g transform="translate(-360, -230) translate(5) translate(50)">
          <g title="text">
            <g transform="translate(0 50)">
              <text display="none" title="2" x="650" y="300">2</text>
            </g>
            <g transform="translate(0 -50)">
              <text title="12" x="550" y="350">1</text>
            </g>
          </g>
          <g title="boxes and lines" stroke="black" stroke-width="2" fill="none">
            <g display="none">
              <rect title="top right box" x="600" y="270" width="100" height="50"/>
              <rect title="top left box" x="400" y="270" width="200" height="50"/>
            </g>
            <g transform="">
              <rect display="none" title="top box" x="400" y="270" width="300" height="50"/>
              <path title="top arrow" d="M 500 270 h 75 l 25 25 l -25 25 h -75 v -50" fill="none"  stroke="black" stroke-width="2" />
              <path title="middle arrow" d="M 600 320 h -175 l -25 25 l 25 25 h 175 v -50" fill="none"  stroke="black" stroke-width="2" />
              <path title="bottom arrow" transform="translate(0 10)" d="M 500 370 h -75 l -25 25 l 25 25 h 75 v -50" fill="none"  stroke="black" stroke-width="2" />
            </g>
            <g transform="translate(0 50)">
              <rect display="none" title="bottom left box" x="400" y="320" width="100" height="50"/>
              <path display="none" title="bottom left arrow" d="M 400 320 h 75 l 25 25 l -25 25 h -75 v -50" fill="none"  stroke="black" stroke-width="2" />
            </g>
            <g>
              <rect display="none" title="bottom right box" x="500" y="320" width="200" height="50"/>
              <path display="none" d="M 700 320 h -75 l -25 25 l 25 25 h 75 v -50" fill="none"  stroke="black" stroke-width="2" />
              <g title="" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="40" fill="black" class="fillfg" stroke="none">
                <g transform="translate(0 50)">
                  <text title="arg2" x="500" y="300">-2</text>
                  <text title="result" transform="translate(0 10)" x="450" y="350">-1</text>
                </g>
              </g>
            </g>
            <g display="none" title="plus lines full">
              <path d="M 575 295 L 625 295" title="plus line 1 full" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
              <path d="M 600 270 L 600 320" title="plus line 2 full" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
            </g>
            <g display="none" title="plus lines minus 10">
              <path d="M 585 295 L 615 295" title="plus line 1" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
              <path d="M 600 280 L 600 310" title="plus line 2" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
            </g>
            <g display="none" title="minus lines minus 10">
              <g transform="translate(0 50) translate(-100 0)">
                <path transform="translate(-3)" d="M 600 280 L 600 310" title="minus line" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
                <path transform="translate(3)" d="M 600 280 L 600 310" title="minus line" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);stroke-width: 2px;"/>
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>