My first svg image - svg

Question

I have made my first experience with the tag <path> on svg and was wondering if there was a better way to do it. It came out as I wanted, only black in those zones and the rest as transparent (not just white).
My code:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" />
</svg>
Visual path (start on the green ball, follow the orange line untill the red ball, the blue line is isn't needed with the Z = closepath):
I used only Ls as I yet have to learn how the others work. M to start and Z to end, I think.
My way of learning is by testing a lot and read less. So, any suggestions for someone starting to learn svg that aren't just links to begginers's guides or tutorials? This will probably gets some downvotes.

Answer 1

Assuming you want the "L" shapes to be holes - which is what it looks like you want - then you should be using subpaths. Ie. use the "move" path command ("M"). You shouldn't use connecting lines to jump from one shape to another, like you are currently doing, for two reasons:
Depending on the renderer, those zero-width slivers may sometimes be visible. Especially for some colour combinations.
You can't use a stroke colour on the shape if you want to. For example:
<svg width="200" height="200">
<path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" stroke="green" stroke-width="4"/>
</svg>
Here's how you should be doing it:
Create closed paths for each of the individual shapes in your path.
// top left triangle
M 10 10 L 10 160 L 160 10 Z
// top left 'L'
M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z
// central shape
M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z
// top right chevron
M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z
// bottom right triangle
M 200 50 L 50 200 L 200 200 Z
// bottom right 'L'
M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z
// bottom left chevron
M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z
Merge these all into a single path and you get the result you want. See below.
Where paths overlap/intersect they usually make holes. Sometimes they don't, but if you are consistent about the direction you use to define your paths (clockwise or anticlockwise), they will.
<svg width="220" height="220">
<path d="M 10 10 L 10 160 L 160 10 Z
M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z
M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z
M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z
M 200 50 L 50 200 L 200 200 Z
M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z
M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z" stroke="green" stroke-width="4"/>
</svg>

Answer 2

Svg. How i would do it:
Here is how fill rule works: MDN fill-rule
In after though i would use MDN polygon
<svg viewBox="0 0 100 100">
<!--Middle element -->
<path d="M25,75, 25,62.5 62.5,25 75,25 75,37.5 37.5,75 25,75 Z" />
<!--Corners -->
<path d="M 100,0 100,12.5 87.5,25 87.5,12.5 75,12.5 87.5,0Z" />
<!-- Look how all the numbers are opposite of the ones above!-->
<path d="M 0,100 12.5,100 25,87.5 12.5,87.5 12.5,75 0,87.5Z" />
<!-- shape within a shape with fill rule-->
<path fill-rule="evenodd" d="M 0,0 75,0 0,75
M12.5,12.5 20,12.5 20,15 15,15 15,30 12.5,30" />
<path fill-rule="evenodd" d="M 100,100 25,100 100,25
M87.5,87.5 80,87.5 80,85 85,85 85,70 87.5,70" />
</svg>
(Personal opinion) By setting the shapes in different paths its easier to read the code.