title: Subtract one circle from another in SVG
body: <p>I'm trying to find a way to subtract one shape from another in SVG, creating a hole in the middle or a bite out of the side of it. Kind of like a clipping path, but instead of showing the intersection, I want to show one of the parts outside the intersection. <a href="https://stackoverflow.com/questions/10029613/subtract-mask-away-a-path-by-a-circle-shape">One solution</a> involved using Adobe Flex, but I did not know how to implement it properly. I understand that there is a way to do this in Inkscape using boolean path operations, but I want to keep the circle elements the way they are instead of changing them into path elements.</p>
  
  <pre><code>&lt;defs&gt;
      &lt;subtractPath id="hole"&gt;
          &lt;circle r="50" cx="100" cy="100" /&gt;
      &lt;/subtractPath&gt;
  &lt;/defs&gt;
  &lt;circle id="donut" r="100" cx="100" cy="100" subtract-path="url(#hole)" /&gt;
  </code></pre>