To expand on [Tobias Snoad's answer][1], picking up the pen with the **Move** command and drawing a second shape *in the opposite direction* (as [Brian Hempel pointed out][2]), will remove that section from the original path.  This is due to the [`fill-rule:evenodd`][11] (default) as explained in [this answer][12].

Here's an example that will draw a 10x10 box and then reverse a 6x6 box inside it:



    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="0,0,10,10">
      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 v  6 h  6 v  -6 z" /> 
    </svg>

Which will produce the second box in the image below, with each point numbered and arrowed so you can see direction:

[![Path Orientation][3]][3]

### Here's a running demo is Stack Snippets 





    svg path.shape {
      fill: green;
      stroke: #1b1b1b;
      stroke-width: .5px;
    }
    svg path.arrow {
      fill: yellow;
      stroke: black;
      stroke-width: .1px;
    }
    svg text {
      font-size: .8px;
      font-family: monospace;
      stroke: navy;
      stroke-width: .1px;
      text-anchor: middle;
      alignment-baseline: middle;
    }
    svg circle {
      r: .5;
      stroke: navy;
      stroke-width: .1px;
      fill: yellow;
    }



    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">

      <defs>
        <marker id='arrow' orient="auto"  
              refX='-.9' refY='1'
              markerWidth='2' markerHeight='2' >
          
          <path d='M 0,0 V 2 L 1,1 Z' class="arrow"/>
        </marker>
      </defs>    

      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 h  6 v  6 h  -6 z"  
            marker-mid='url(#arrow)' class="shape" />
                                 
        <circle cx="0" cy="0" />                  
        <text    x="0"  y="0" > 1</text>    
        <circle cx="10" cy="0" />                  
        <text    x="10"  y="0" > 2</text>  
        <circle cx="10" cy="10" />                  
        <text    x="10"  y="10" > 3</text>  
        <circle cx="0" cy="10" />                  
        <text    x="0"  y="10" > 4</text>  
        <circle cx="2" cy="2" />                  
        <text    x="2"  y="2" > 5</text>  
        <circle cx="8" cy="2" />                  
        <text    x="8"  y="2" > 6</text>  
        <circle cx="8" cy="8" />                  
        <text    x="8"  y="8" > 7</text>  
        <circle cx="2" cy="8" />                  
        <text    x="2"  y="8" > 8</text>  
    </svg>

    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">
     
      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 v  6 h  6 v  -6 z" 
            marker-mid='url(#arrow)' class="shape" /> 
       
        <circle cx="0" cy="0" />                  
        <text    x="0"  y="0" > 1</text>    
        <circle cx="10" cy="0" />                  
        <text    x="10"  y="0" > 2</text>  
        <circle cx="10" cy="10" />                  
        <text    x="10"  y="10" > 3</text>  
        <circle cx="0" cy="10" />                  
        <text    x="0"  y="10" > 4</text>  
        <circle cx="2" cy="2" />                  
        <text    x="2"  y="2" > 5</text>  
        <circle cx="2" cy="8" />                  
        <text    x="2"  y="8" > 6</text>      
        <circle cx="8" cy="8" />                  
        <text    x="8"  y="8" > 7</text>  
        <circle cx="8" cy="2" />                  
        <text    x="8"  y="2" > 8</text>  
    </svg>




### SVG Path Command Refresher 

**Two Variations**:

* `M 100,150` Uppercase (**Absolute**) - Move to *exact coordinates* `100,150` (*x,y*)
* `m 100,150` Lowercase (**Relative**) - Move the pen `100` down and `150` right of where you are

**Straight Commands**:

* <code>M <i>x,y</i></code> - Pick the pen up and **M**ove it to the point *`x,y`*
* <code>L <i>x,y</i></code> - Draw a straight **L**ine to the point *`x,y`*
* <code>H <i>x</i></code> - Draw a line **H**orizontally to the right by *`x`*
* <code>V <i>y</i></code> - Draw a line **V**ertically down by *`y`* 
* `Z|z` - Closes the path by drawing a straight line back to the start (last M location)  
  **NOTE**: `Z` is *completely optional* - it's just a shortcut to get back to the starting point

**Curved Commands**:

* <code>C <i>cX1,cY1 cX2,cY2 eX,eY</i></code> - Draw a Bezier **C**urve based on *Two* bezier controls point and end at the coordinates *`eX,eY`*
* <code>S <i>cX2,cY2 eX,eY</i></code> - Draw a **S**implifed Curve based on the previous `S|C` control point and *One* specified bezier control point and end at the coordinates *`eX,eY`*
* <code>Q <i>cX2,cY2 eX,eY</i></code> - Draw a **Q**uadratic Curve based on *One* bezier control point and end at the coordinates *`eX,eY`*
* <code>T <i>eX,eY</i></code> - Draw a **T**erminal Quadratic Curve based on the previous bezier control point and end at the coordinates *`eX,eY`*
* <code>A <i>rX,rY rotation, arc, sweep, eX,eY</i></code> - Draw an Elliptical **A**rc for an oval with the specified width *`rX`* and height *`rY`*.  Define the *`rotation`* with degrees and direction with 0|1 for *`arc`* and *`sweep`* and end at the coordinates *`eX,eY`*

> **TIP**: In most instances you can simplify the precision of any automatically generated path points without sacrificing any human discernibility, even when scaled heavily. You can do a regex [find **`([0-9]*)(\.[0-9]*)`** and replace with **`$1`**][6] to remove any trailing decimals.  You can also format each command on it's own line with [find **`\s*([a-zA-z])\s*`** and replace with **`\n$1 `** ][7].

### Further Reading:

* [MDN - SVG Tutorial Paths][4]
* [The SVG `path` Syntax: An Illustrated Guide][5]
* [How to place arrow head triangles on SVG lines?][8]
* [How To Create SVG Arrowheads and Polymarkers][9]
* [SVG center text in circle][10]



  [1]: https://stackoverflow.com/a/14575057/1366033
  [2]: https://stackoverflow.com/questions/3560835/cut-out-one-svg-path-out-of-another-one#comment53137682_14575057
  [3]: https://i.stack.imgur.com/pXu8G.png
  [4]: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
  [5]: https://css-tricks.com/svg-path-syntax-illustrated-guide/
  [6]: https://regexr.com/3iu1s
  [7]: https://regexr.com/3n9g0
  [8]: https://stackoverflow.com/q/11808860/1366033
  [9]: https://vanseodesign.com/web-design/svg-markers/
  [10]: https://stackoverflow.com/q/28128491/1366033
[11]: https://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg
[12]: https://stackoverflow.com/a/7716523/1366033

I have several SVG paths looking like this:

    M204.21121687607624,196.94037184487675L329.92080751248244,195.46306542867487A130,130,0,0,0,244.46261863233696,77.83995929783192Z
    M198.39145828733604,195.04941765207442L235.83285625620988,75.03597952801854A130,130,0,0,0,97.55860203112616,119.9640082076644Z

I now want to add another path, but, instead of adding it to the shape, cut it out from the previous paths. How can I accomplish this?

I couldn't find any information on this in the SVG docs - thanks for your help!