trying to create smoothly waves (three identical waves)
anchor points are set correctly (0 25, 240 10, 480 25, 720 10, 960 25, 1200 10, 1440 25)
problem is params for control points
pls help
<svg class='svgup' width="1440" height="25">
<path class='pathup' fill='#007399' d="
M0 0
L0 25
C 0 25 120 10 240 10
C 360 10 500 25 480 25
C 500 25 600 10 720 10
C 840 10 1080 25 960 25
C 1080 25 1080 10 1200 10
C 1320 10 1320 25 1440 25
L 1440 0
L 0 0
z"
</svg>
Try using Quadratic Bezier:
<svg width="600" height="100">
<path fill='#007399' d="
M 0 0
V 25
Q 100 0 200 25
Q 300 0 400 25
Q 500 0 600 25
V 0
H 0
z"/>
</svg>
Related
I'm new in the field of web designing. When I hear the inspect option in the browser, I think to change the youtube icon into mytube. Then, when I check the code of the icon I got a long data which I never see anywhere in my studying period. I attach that code with this. There are anyone who know to convert the letters y, o, u into m, y??
<svg>
<path d="M41.4697 18.1937C40.9053 17.8127 40.5031 17.22 40.2632 16.4157C40.0257 15.6114 39.9058 14.5437 39.9058 13.2078V11.3898C39.9058 10.0422 40.0422 8.95805 40.315 8.14196C40.5878 7.32588 41.0135 6.72851 41.592 6.35457C42.1706 5.98063 42.9302 5.79248 43.871 5.79248C44.7976 5.79248 45.5384 5.98298 46.0981 6.36398C46.6555 6.74497 47.0647 7.34234 47.3234 8.15137C47.5821 8.96275 47.7115 10.0422 47.7115 11.3898V13.2078C47.7115 14.5437 47.5845 15.6161 47.3329 16.4251C47.0812 17.2365 46.672 17.8292 46.1075 18.2031C45.5431 18.5771 44.7764 18.7652 43.8098 18.7652C42.8126 18.7675 42.0342 18.5747 41.4697 18.1937ZM44.6353 16.2323C44.7905 15.8231 44.8705 15.1575 44.8705 14.2309V10.3292C44.8705 9.43077 44.7929 8.77225 44.6353 8.35833C44.4777 7.94206 44.2026 7.7351 43.8074 7.7351C43.4265 7.7351 43.156 7.94206 43.0008 8.35833C42.8432 8.77461 42.7656 9.43077 42.7656 10.3292V14.2309C42.7656 15.1575 42.8408 15.8254 42.9914 16.2323C43.1419 16.6415 43.4123 16.8461 43.8074 16.8461C44.2026 16.8461 44.4777 16.6415 44.6353 16.2323Z" class="style-scope yt-icon"></path>
</svg>
The long string is a list of path commands. Each letter followed by numbers decides how the path is drawn. You picked the letter "o" in YouTube.
You can edit an SVG document or element in an desktop editor like Illustrator or InkScape. For editing paths I often use an online editor like SvgPathEditor.
In the below example I copied the code for the YouTube icon. Using SvgPathEditor I scaled up and rounded all numbers to make the sting shorter.
<svg viewBox="0 0 290 200" width="300">
<path d="M 280 31 C 276 19 267 9 254 6 C 232 0 143 0 143 0
C 143 0 54 0 31 6 C 19 9 9 19 6 31 C 0 54 0 100 0 100
C 0 100 0 146 6 169 C 9 181 19 191 31 194 C 54 200 143 200 143 200
C 143 200 232 200 254 194 C 267 191 276 181 280 169
C 286 146 286 100 286 100 C 286 100 286 54 280 31 Z" fill="#FF0000" />
<path d="M 114 143 L 188 100 L 114 57 V 143 Z" fill="white"/>
</svg>
I want to fill the inside of this shape with red. When I use style="fill: red;" it only colors the shape border and not the inside. What attribute should I use to fill inside the shape ?
<svg>
<path d="M1077.0021,426.94783h-355a9.01357,9.01357,0,0,0-,9v228a9.01357,9.01357,0,0,0,9,9h355a9.01357,9.01357,0,0,0,9-9v-228A9.01357,9.01357,0,0,0,1077.0021,426.94783Zm7,237a7.00778,7.00778,0,0,1-7,7h-355a7.00778,7.00778,0,0,1-7-7v-228a7.00779,7.00779,0,0,1,7-7h355a7.00779,7.00779,0,0,1,7,7Z"
transform="translate(-113.9979 -130.05217)"
style="fill: red;"
/>
</svg>
There was something wrong in that path. I think it was the z in the middle of it all. In some of the arches there was a comma missing. I cleaned up the path and moved it to 0,0.
I used the tool SvgPathEditor for all of this.
<svg viewBox="0 0 373 246">
<path d="m 364 0 h -355 a 9 9 0 0 0 -9 9 v 228 a 9 9 0 0 0 9 9 h 355 a 9 9 0 0 0 9 -9 v -228 a 9 9 0 0 0 -9 -9 z M 371 237 a 7 7 0 0 1 -7 7 h -355 a 7 7 0 0 1 -7 -7 v -228 a 7 7 0 0 1 7 -7 h 355 a 7 7 0 0 1 7 7 z" style="fill: red;" />
</svg>
Update
The inside should also be filled. An alternative could be to split the path into two and then give them a fill each.
<svg viewBox="0 0 373 246">
<path d="m 364 0 h -355 a 9 9 0 0 0 -9 9 v 228 a 9 9 0 0 0 9 9 h 355 a 9 9 0 0 0 9 -9 v -228 a 9 9 0 0 0 -9 -9 z" style="fill: darkred;" />
<path d="M 371 237 a 7 7 0 0 1 -7 7 h -355 a 7 7 0 0 1 -7 -7 v -228 a 7 7 0 0 1 7 -7 h 355 a 7 7 0 0 1 7 7 z" style="fill: tomato;" />
</svg>
I have drawn a representation of a cogwheel, and I am unable to fill the area I want filled. You can look at it here:
https://jsfiddle.net/9k451fb6/
I want the portion filled outside of the "hole" in the center, out to the cogs, whereas the "hole" gets filled, along with portions of the edges of the cogs (which in itself is curious to me, as the path is a single complete path with a single close (z) at the end, so why does it seem like each cog section has been closed?)
I have tried the options of fill-rule, nonzero and evenodd, but nothing changes.
This is the code I'm using. Note that it is drawn with a single path. However I have tried both this method, and closing the path (inserting a z) just before drawing the circle in the middle ("hole"):
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15 M 211 15 A 30 30 0 0 0 259 50 L 278 77 M 278 77 A 30 30 0 0 0 296 133 L 296 166 M 296 166 A 30 30 0 0 0 278 222 L 259 249 M 259 249 A 30 30 0 0 0 211 284 L 179 294 M 179 294 A 30 30 0 0 0 120 294 L 88 284 M 88 284 A 30 30 0 0 0 40 249 L 21 222 M 21 222 A 30 30 0 0 0 3 166 L 3 133 M 3 133 A 30 30 0 0 0 21 77 L 40 50 M 40 50 A 30 30 0 0 0 88 15 L 120 5 M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>
I think this is what you want to achieve:
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15
A 30 30 0 0 0 259 50 L 278 77
A 30 30 0 0 0 296 133 L 296 166
A 30 30 0 0 0 278 222 L 259 249
A 30 30 0 0 0 211 284 L 179 294
A 30 30 0 0 0 120 294 L 88 284
A 30 30 0 0 0 40 249 L 21 222
A 30 30 0 0 0 3 166 L 3 133
A 30 30 0 0 0 21 77 L 40 50
A 30 30 0 0 0 88 15 L 120 5
M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>
I've removed the M commands between cog's "teeths". By moving to a new point for every tooth you were forcing the filling of that fragment.
Any way it was already answered I'm going to leave here my approach. The problem with your svg was that every teeth corner of the cogwheel started a new sub path which nodes where at the same possition of the next teeth but were not connected with eachother. I just opened the file in Inkscape, selected all nodes and joined with the corresponding tool. Notice for the future: Any time you see a similar behaviour, mainly with svgs exported by Illustrator, CorellDraw and some online editors, you can be sure that some where in the path there are overlaped nodes but not conected.
Notice the difference between the two corners. The one above the two nodes are not connected.
So what you really got was a series of sub paths filled in blue as the arrow shows.
And this is the code just as SVGO cleaned it after Inkscape have saved it.
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" d="M 264.07142,186.6301 C 259.69918,200.23262 265.52681,215.03117 278,222 l -19,27 C 248.58911,238.28353 231.87939,236.86124 219.80706,245.66397 207.73474,254.46671 203.97989,270.81109 211,284 l -32,10 c -2.6299,-14.22385 -15.03507,-24.54564 -29.5,-24.54564 -14.46493,0 -26.8701,10.32179 -29.5,24.54564 L 88,284 C 95.020113,270.81109 91.265258,254.46671 79.192936,245.66397 67.120613,236.86124 50.410887,238.28353 40,249 L 21,222 C 33.47319,215.03117 39.300816,200.23262 34.928577,186.6301 30.556338,173.02758 17.197624,164.39607 3,166 l 0,-33 c 14.197624,1.60393 27.556338,-7.02758 31.928577,-20.6301 C 39.300816,98.767378 33.47319,83.968835 21,77 L 40,50 C 50.410887,60.716466 67.120613,62.138761 79.192936,53.336026 91.265258,44.533291 95.020113,28.188906 88,15 L 120,5 c 2.6299,14.223853 15.03507,24.545641 29.5,24.545641 14.46493,0 26.8701,-10.321788 29.5,-24.545641 l 32,10 c -7.02011,13.188906 -3.26526,29.533291 8.80706,38.336026 C 231.87939,62.138761 248.58911,60.716466 259,50 l 19,27 C 265.52681,83.968835 259.69918,98.767378 264.07142,112.3699 268.44366,125.97242 281.80238,134.60393 296,133 l 0,33 c -14.19762,-1.60393 -27.55634,7.02758 -31.92858,20.6301 z M 150,200 c 27.51544,-0.27517 49.63706,-22.73389 49.4979,-50.23579 -0.13917,-27.5005 -22.48529,-49.69493 -49.9979,-49.69493 -27.51261,0 -49.858733,22.19443 -49.997895,49.69493 C 99.362936,177.26611 121.48456,199.72483 149,200 Z" style="fill:#0000ff;fill-rule:evenodd;stroke:#ff0000;stroke-width:2"/>
</svg>
And, as a final advice, as I always recommend, if svg was created for the web, and Inkscape produces native svg files ready for the web, why people is still struggling with the awful overcomplicated unhuman svg files produced by propietary software?
I need to know how to combine multiple from a SVG file.
Right now I have three icons and somehow I can not find any logic behind that.
I read that I need to remove the last part and combine it with the following.
Example:
From
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
TO
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
But the output is empty.
And if I only take one path of both I will see only this path.
Is there any easy explanation how to do that?
If you then take your path:
M54.4 2a54.4 54.4 0 106.2 108.4c9.1 2.2 18.9 3.5 28.3 5.2a40 40 0 0132.4 32.4l35.4 99.7a49.9 49.9 0 0049.2 41.3h210c22 0 41.5-14.4 47.9-35.5l47-155.8c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8zm97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 1.3H206c-14.6 0-27-10.4-29.5-24.8z
and multiply it by 10 using: https://yqnn.github.io/svg-path-editor/
You get rid of all decimal notation and make the file even smaller:
M 544 20 a 544 544 90 1 0 62 1084 c 91 22 189 35 283 52 a 400 400 90 0 1 324 324 l 354 1997 a 499 499 90 0 0 492 413 h 2100 c 220 0 415 -144 479 -355 l 470 -1558 c 8 -30 3 -63 -15 -89 c -20 -25 -49 -40 -80 -40 H 1482 l -72 -403 c -70 -244 -136 -383 -492 -487 A 542 542 90 0 0 544 20 z m 0 200 a 344 344 90 1 1 0 688 a 344 344 90 0 1 0 -688 z m 974 1827 h 3360 l -431 1429 a 298 298 90 0 1 -287 213 H 2060 c -146 0 -270 -104 -295 -248 z
The viewBox ofcourse needs to be multiplied as well. As the (default) stroke-width="1"
<svg width="400" viewBox="0 0 5150 3900">
<path d="M544 20a544 544 90 1 0 62 1084c91 22 189 35 283 52a400 400 90 0 1 324 324l354 1997
a499 499 90 0 0 492 413h2100c220 0 415-144 479-355l470-1558c8-30 3-63-15-89
c-20-25-49-40-80-40h-3531l-72-403c-70-244-136-383-492-487a542 542 90 0 0-374-938z
m0 200a344 344 90 1 1 0 688a344 344 90 0 1 0-688z
m974 1827h3360l-431 1429a298 298 90 0 1-287 213h-2100c-146 0-270-104-295-248z"
stroke="red" stroke-width="10" fill="gray"/>
</svg>
You can save 30 bytes more in the path if you now divide everything by 6
M90 3a90 90 90 1 0 10 180c15 4 31 6 47 9a66 66 90 0 1 54 54l59 332a83 83 90 0 0 82 69h349c37 0 69-24 80-59l78-259c1-5 0-10-2-15c-3-4-8-7-13-7h-588l-12-67c-12-41-23-64-82-81a90 90 90 0 0-62-156zm0 33a57 57 90 1 1 0 114a57 57 90 0 1 0-114zm162 303h558l-72 237a49 49 90 0 1-48 35h-348c-24 0-45-17-49-41z
You can visualize your paths if you put them in a suitable <svg> element. It needs to have a "sensible" viewBox attribute in it. For your example the following works: <svg viewBox="0 0 620 840">. I also added two rectangles (<rect>) to show the extent of your overlaying symbols.
Note: To actually combine two paths into one is a slightly more complex task. This can be done with a suitable graphical SVG-editor, like Inkscape (or many others ...).
<svg viewBox="0 0 620 840">
<rect x="0" y="0" width="480" height="440" style="stroke:black;fill:none"/>
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
<rect x="80" y="300" width="540" height="440" style="stroke:black;fill:none"/>
<g style="fill:none;stroke:red">
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
</g>
</svg>
I combined the two paths of your second part using Inkscape, put it through the online SVG optimizer SVGOMG! (thanks for the hint, Danny '365CSI' Engelman) and ended up with this:
<svg xmlns="http://www.w3.org/2000/svg"
width="400" viewBox="-1 0 515 390">
<path d="M54.4 2a54.4 54.4 0 106.2 108.4
c9.1 2.2 18.9 3.5 28.3 5.2
a40 40 0 0132.4 32.4l35.4 199.7a49.9 49.9 0 0049.2 41.3
h210c22 0 41.5-14.4 47.9-35.5l47-155.8
c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3
c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20
a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8z
m97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 21.3H206
c-14.6 0-27-10.4-29.5-24.8z"
stroke="red" fill="gray"/>
</svg>
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.
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>
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.