Question

My application generates a set of graph points to be drawn in SVG. The point values are always in the range of 0-1000 horizontally and vertically. The size of the rectangle where the drawing takes place might change.

here is the SVG element to draw the graph on a 200 X 85 rect:

<svg width="200" height="85" viewBox="0 0 1000 1000" preserveAspectRatio="none">
    <polyline  stroke="#e69800"
               stroke-width="2px"
               fill="none"
               points="0,1000 100,900 200,800
                       300,700 400,600 500,500
                       600 400 700,300 800,200900,100 1000,0"/>
</svg>

Setting viewBox="0 0 1000 1000" makes the graph shrink to the proper size, the problem is that this also shrinks the width of the line in the same proportion, so the line is not visible any more.

SVG seems to ignore the “px” in the attribute stroke-width="2px".

Is there a way to specify the width of the line (stroke-width) in absolute pixel size?

Answer 1

You can use the attribute vector-effect="non-scaling-stroke" to prevent the line from scaling with the rest.

Ref: http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

The resulting visual effect of this modification is that stroke width
is not dependant on the transformations of the element (including
non-uniform scaling and shear transformations) and zoom level

It seems that SVG1.1 doesn’t support non-scaling stroke though, so the final result might depend on the rendering engine.