Draw a line that doesn't get thicker when image stretches

Question

Is there a way in SVG to draw a line that keeps thin when the image is stretched?

I\'m using a SVG image as a CSS background, something like this:

&l         


        

Answer 1

In browsers that implement SVG 1.2T you can have a non-scaling stroke Opera and Webkit support this as does Firefox from version 15.

<!-- via property -->
<line … vector-effect="non-scaling-stroke" />

<!-- via CSS -->
<style>
  line { vector-effect:non-scaling-stroke }
</style>
<line … />