Make half outline in the svg - svg

Question

I have an SVG which looks like the image below:
Code for SVG is below:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="red"
/>
</svg>
I want to have an outline of black at only the half circular part of the svg, I am new to svg, so I am not able to do it. Please help.
NOTE: ignore the black outline at the top and bottom, that is not the part of svg, it comes because I have taken screenshot of my application. Only the red part is svg

Answer 1

For this you may use a different path whose's d attribute is a part of the previous path d attribute.
This is the d attribute you have:
d="M75.2 0v61H0V0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
h-.1z"
For the new d attribute you remove M75.2 0v61H0V0. This is drawing part of the lines and ends in the point 0,0. You will use this point as a starting point: M0,0 Next you are using the bézier curves c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33 c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1 without the part that is closing the path.
This new path have fill="none" and the stroke of the color and width you like.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
h-.1z"
fill="red"
/>
<path
d="M0,0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1" fill="none" stroke="black" stroke-width="3"/>
</svg>

Answer 2

Alternatively you could have used the exact same path, but used s dash pattern to stroke the correct section.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="red"
/>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="none" stroke="black" stroke-width="3"
stroke-dasharray="0 197 109 100"
/>
</svg>