Stop SVGs scaling weairdly

I was reminded of this (vector-effect) technique from a friend Chris Corby. "The value 'non-scaling-stroke' is a keyword for a predefined vector effect that causes an object's stroke-width to be unaffected by transformations and zooming."

<svg viewBox="0 0 500 240">
<path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="black" stroke-width="2px" fill="none"></path>
</svg>

Source

• MDN documentation