Scale SVG image non-proportionally to fit in remaining space - html

Question

Below arrow is composed out of 3 single elements. The center part should stretch horizontally so the arrow can fill its surrounding container. But as you can see in the rendered code, the stretching doesn't work. How to enable stretching and making sure, there are no gaps at the junctures. Probably, there should be a small overlap between the parts because of the antialiasing (which is mandatory).
EDIT: Using preserveAspectRatio="none" suggested by #Turnip is stretching the image, but it is producing gaps and jumps on certain widths. See this screenshot:
Can't explain this weird behavior at all!
.arrow {
display: flex;
max-width: 200px;
padding-bottom: 2em;
}
.arrow svg {
height: 25px;
shape-rendering: auto;
}
#arrow-1 svg.stretched {}
#arrow-2 svg.stretched {
width: 100%;
}
<div class="arrow" id="arrow-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="mid" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>
<div class="arrow" id="arrow-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="stretched" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>

Answer 1

You can do the biggest part using CSS and it would easier to handle:
.box {
width: 50%;
margin: auto;
height: 50px;
border: 10px solid;
border-bottom: 0;
border-radius: 20px 20px 0 0;
position: relative;
}
.box::after {
content: "";
position: absolute;
bottom: 0;
right: -5px;
width: 45px;
height: 58px;
transform: translate(50%, 30%);
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 11 13"><path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"></path></svg>') bottom/contain no-repeat;
}
<div class="box"></div>
Also like below:
.box {
width: 50%;
margin: auto;
height: 50px;
border: 10px solid;
border-bottom: 0;
border-radius: 20px 20px 0 0;
position: relative;
}
.box svg {
position: absolute;
bottom: 0;
right: -5px;
width: 45px;
transform: translate(50%, 30%);
}
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 11 13"><path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"></path></svg>
</div>

Answer 2

Instead of using 3 svg elements I'm using only one. I'm putting the start and the end of the "arrow" in a <symbol> element so that I can use those shapes where I need them. Please observe that the <symbol> elements have a tight viewbox (the viewBox is wrapping tight the shape and has the same size as the bounding box of the shape + some extra space for the 1/2 width of the line).
Now I can use those symbols as many times as I need and where I need.
In order to connect the 2 use elements I'm using a line. please observe that the x1 attribute of the line (in the first group) is 18 where 18 = 10 (the x attribute of the first use element) + 8 (the width attribute of the first use element).
The x2 attribute of the line deppends on how long you need it to be and has the same value as the attribute x of the second use element.
<svg viewBox="0 0 130 70">
<symbol id="start" xmlns="http://www.w3.org/2000/svg" viewBox="5 0 8 22">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62" />
</symbol>
<symbol id="end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0" />
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z" />
</symbol>
<g id="g1">
<use xlink:href="#start" x="10" width="8" height="22" />
<use xlink:href="#end" x="100" width="11" height="25" />
<line x1="18" y1="2.5" x2="100" y2="2.5" stroke="black" stroke-width="3" stroke-linecap="round" />
</g>
<g id="g2">
<use xlink:href="#start" x="20" y="35" width="8" height="22" />
<use xlink:href="#end" x="70" y="35" width="11" height="25" />
<line x1="28" x2="70" y1="37.5" y2="37.5" stroke="black" stroke-width="3" stroke-linecap="round" />
</g>
</svg>

Answer 3

Use preserveAspectRatio="none" on the SVG that you want to stretch. This will allow the inner rect to stretch along with the SVG element.
.arrow {
display: flex;
max-width: 200px;
padding-bottom: 2em;
}
.arrow svg {
height: 25px;
shape-rendering: auto;
}
#arrow-1 svg.stretched {}
#arrow-2 svg.stretched {
width: 100%;
}
<div class="arrow" id="arrow-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="mid" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>
<div class="arrow" id="arrow-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="stretched" viewBox="0 0 3 25" preserveAspectRatio="none"><rect y="2" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>