How to draw a polygon in SVG with absolute line width?

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?

See this question maybe : stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg — Joan Charmant
Yes, this did the trick. I added the attribute vector-effect="non-scaling-stroke" and now the line is 2 pixel wide AND is drawn with anti-aliasing so it looks good. @Joan Charmant: if you put this as an answer I will accept it. Thanks! — Periodic Maintenance

Joan Charmant Joan Charmant · Accepted Answer · 2012-10-25T09:46:43

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.

How to draw a polygon in SVG with absolute line width?

1 Answers