Resizing single shapes dynamically without scaling the whole SVG

Question

I have an arrow as a SVG which\'s length I want to alter in response to the width of a wrapping DIV (for example).

All my previous attempts have led into this behavior (

Answer 1

By using symbol's you can make the shapes you want and just include them in. Then to extend the middle section, just make a new path and make the line longer. They can be positioned wherever you like by using the transform property