How can I place a svg line on top of another?

Question

I have this code but the lines appear separated, I want them to appear next to each other. Absolute positioning doesn't work.

<svg height="500" widht="500" >
<line x1="200" y1="0" x2="150" y2="250" style="stroke:blue;stroke-width:3">
</svg>
<svg height="500" widht="500">
<line x1="300" y1="0" x2="300" y2="500" style="stroke:blue;stroke-width:3" id="line1">
</svg>
<svg height="500" widht="500" >
<line x1="100" y1="0" x2="300" y2="250" style="stroke:blue;stroke-width:3">
</svg>

EDIT: I solved it by placing each svg element withtin the <svg> tag, but discovered that the element won't show if you don't add a space and / before closing the element's tag.
https://code.sololearn.com/WhI2e4rFu2We/#html

Answer 1

Right. If you put them inside separate <svg> tags, then the browser will treat them as separate pictures so they won't overlap.
SVG is a kind of XML therefore it is quite sensitive to closing each tag. So you must be sure to follow either of these patterns:
<line id="l1" />
<line id="l2"></line>