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:

<svg ... preserveAspectRatio="none" viewBox="0 0 15 15">
  <line x1="0" y1="15" x2="15" y2="0"
        color="#000" stroke="#333" stroke-width="1" />
</svg> 

(A diagonal line). I’m stretching this image through a rectangular element, and when the element is bigger, the line gets thicker, but I need an always-thin line.

Possible? Something like “thin” lines in flash.

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 … />