Yes, you can use percentages in svg.
for basic shapes its quite simple. You can write your main rect as
<rect x="0" y="5" width="100%" height="10"/>
your second rect is even simpler, as it sits at 0,0 all the time
<rect x="0" y="0" width="10" height="20"/>
but with the arrow there is a problem in pathes and polygon you can not use percentages. To work around this problem there is a two step solution.
first put the path in a symbol element:
<symbol id="arrow" viewBox="0 0 20 20" width="20" height="20">
<path d="M0,0L20 10L0 20z" />
</symbol>
now you can position this symbol like you would position a rect... easy...
<use xlink:href="#arrow" x="100%" y="0" width="20" height="20"/>
but now your arrow starts a 100% and is completely outside of your viewport. you could just set overflow: visible on your svg and be done with it, but that is not what we want... we want the arrow to end at 100%. But that easy as well, we know that the arrow is 20px wide. So just translate the use back 20px:
<use xlink:href="#arrow" x="100%" y="0" width="20" height="20" transform="translate(-20 0)"/>
using this approach, you can position any shape at any position base on percentages...
to warp it all up, your complete svg now looks like this:
<svg id="svg" height="20px" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="arrow" viewBox="0 0 20 20" width="20" height="20">
<path d="M0,0L20 10L0 20z" />
</symbol>
<g id="Group" fill="#5FDCC7">
<rect x="0" y="5" width="100%" height="10" transform="translate(-20 0)" />
<rect x="0" y="0" width="10" height="20" />
<use xlink:href="#arrow" width="20" height="20" x="100%" y="0" transform="translate(-20 0)" />
</g>
</svg>
and here is a snippet using this svg with 3 different widths:
svg:nth-of-type(1) {
width: 100px
}
svg:nth-of-type(2) {
width: 200px
}
svg:nth-of-type(3) {
width: 300px
}
<svg height="20px" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="arrow" viewBox="0 0 20 20" width="20" height="20">
<path d="M0,0L20 10L0 20z" />
</symbol>
<g id="Group" fill="#5FDCC7">
<rect x="0" y="5" width="100%" height="10" transform="translate(-20 0)" />
<rect x="0" y="0" width="10" height="20" />
<use xlink:href="#arrow" width="20" height="20" x="100%" y="0" transform="translate(-20 0)" />
</g>
</svg>
<br/>
<svg height="20px" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="arrow" viewBox="0 0 20 20" width="20" height="20">
<path d="M0,0L20 10L0 20z" />
</symbol>
<g id="Group" fill="#5FDCC7">
<rect x="0" y="5" width="100%" height="10" transform="translate(-20 0)" />
<rect x="0" y="0" width="10" height="20" />
<use xlink:href="#arrow" width="20" height="20" x="100%" y="0" transform="translate(-20 0)" />
</g>
</svg>
<br/>
<svg height="20px" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="arrow" viewBox="0 0 20 20" width="20" height="20">
<path d="M0,0L20 10L0 20z" />
</symbol>
<g id="Group" fill="#5FDCC7">
<rect x="0" y="5" width="100%" height="10" transform="translate(-20 0)" />
<rect x="0" y="0" width="10" height="20" />
<use xlink:href="#arrow" width="20" height="20" x="100%" y="0" transform="translate(-20 0)" />
</g>
</svg>