SVG center horizontal and vertical line - css

Question

How can I create an SVG containing two lines (one horizontal, one vertical) going from the middle from one side to the middle of the opposite side, thus making a plus sign the same size as the SVG container?
This is what I have now but when changing SVG size the line lengths will not change
<svg width="10px" height="10px">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

Answer 1

For an SVG's contents to scale with its size, it needs to have a viewBox.
svg {
background-color: linen;
}
.point {
stroke: black;
stroke-width: 1;
}
<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
In this example, everything scales, including the line width. If that's not what you want, then you can either use #SirExotic's approach (using percentage coordinates), or you could set the lines to not scale by using vector-effect: non-scaling-stroke.
svg {
background-color: linen;
}
.point {
stroke: black;
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

Answer 2

The container in this example is the body, but you can always wrap it in another container and set your desired height and width.
body,
html {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
<svg height="100%" width="100%">
<line x1="50%" y1="0" x2="50%" y2="100%" style="stroke:blue;stroke-width:1" />
<line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:blue;stroke-width:1" />
</svg>