You should be able to use the fill-rule: evenodd
(default) property to achieve this effect, if you want to prevent the fill of the rectangle from painting where the circle is. See this example from the SVG specification:
The key point is draw outer shape and inner shapes(holes) in different direction (clockwise vs anti-clockwise).
- Draw the outer shape clockwise and draw the inner(holes) shapes anti-clockwise.
- Or conversely, draw the outer shape(holes) anti-clockwise and draw the inner shapes clockwise.
- Concat the path datas of outer shape and inner shapes(holes).
You can cut more holes by concat more hole path data.
This image explain how to cut a hole: