HTML SVG Stroke wider at edges

Question

I have created this scalable vector graphic.

<svg width="150" height="90" style="stroke: black;">
    <rect width="40" height="90" style="fill:white;"></rect>
    <polygon points="40,0 40,90 150,90 100,45 150,0" style="fill:blue;"/>
</svg>

I am aiming for the left hand side but the result returns the right hand side.

As you can see the vertical edges have wider strokes than the horizontal. Is this a defect of svg? Is there a way a can mitigate it to achieve a more consistent stroke.

At edges half of your stroke is out of the svg canvas. To understand what happens please add svg{overflow:visible} — enxaneta

Paul LeBeau Paul LeBeau · Accepted Answer · 2019-05-19T01:49:35

The edges of your shape consincide with the ouside boundary of your SVG. Strokes are drawn so that half their width is on either side of the line.

So whats happening is that half of the top, left and bottom lines are cut off because they are outside of the SVG.

Some solutions would be:

Move your lines inside the SVG by half the stroke width.
Add a viewBox that is half the stroke width bigger than your shape. This will have the effect of scaling down your shape so that all the stroke is drawn.
Add overflow="visible" to your SVG so that that the parts of your shape that are outside the SVG are drawn, and not clipped (as suggested by @enxaneta)

HTML SVG Stroke wider at edges

1 Answers