scalable SVG with fixed border size

Question

I am looking for a way to keep a fixed line width and keeping the svg responsive.

This is how it should look: https://codepen.io/dudleystorey/pen/wMLBLK

However, the example above is established using CSS and I need to do it with the <path> element.

Answer 1

You can do this via <path stroke-width="2" vector-effect="non-scaling-stroke" ... />, even though keep in mind that vector-effect is not implemented in IE10 or lower.

Have a look here in case you need any further explanation or at this example.