Subtract one circle from another in SVG

Question

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

Answer 1

Two answers suggest to (1) use a or (2) use the “fill-rule=evenodd” attribute to subtract a shape B from a shape A (A ∖ B).

Both suggested answers solve the “hole in the middle” (B ⊆ A) part of the question but only the mask approach is a reasonable solution for the “bite out of the side” part (B ⊈ A). Using the evenodd fill-rule means the two shapes are treated equally, so the part of the second shape that does not intersect the first one will be part of the result. In order to bite something out of a shape the “biting” shape would have to share part of its border with the bitten shape. This might be cumbersome to achieve in practice.

An example: In order to subtract a circle from another circle you would have to create a “biting” shape that is the intersection of two circles.

The mask approach is much more universal.