Why can I not create a hole with this SVG path?

Question

Here is the SVG path. I am expecting a hole in the shape, but it does not seem to work. I cannot figure out why:

M70,20 L80,35 75,45 90,55 95,50 105,60 85,80 90,90 80,100 50,70 45,70 30,55 50,30 55,35 z M65,50 L80,70 75,75 55,60 z

Answer 1

The reason for not seeing the hole in the middle of the shape (for the 2nd sub-path) is that you're seeing looking at the SVG path with a fill, so the outer element fill covers everything within it.

If you set the fill to none then it would show nicely:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="29 19 77 82">
    <path d="M70 20 80 35 75 45 90 55 95 50 105 60 85 80 90 90 80 100 50 70 45 70 30 55 50 30 55 35zM65 50 80 70 75 75 55 60z" stroke="#000000" stroke-width="1" fill="none"/>
</svg>

You can also do it in https://yqnn.github.io/svg-path-editor/ by unchecking the Fill checkbox.

---

But to modify your path in a way that you should see the middle shape as an exclusion of the outer shape would be to draw the 2nd path in the opposite direction than the outer sub-path (the outer one is drawn clockwise, so you draw this one counter-clockwise).

You do that by changing M65 50 L80 70 75 75 55 60Z to M65 50 55 60 75 75 80 70Z:

M70 20 80 35 75 45 90 55 95 50 105 60 85 80 90 90 80 100 50 70 45 70 30 55 50 30 55 35Z M65 50 55 60 75 75 80 70Z