SVG Polygon Arrow, thin line at top?

Question

I tried to create a simple arrow as SVG, using the polygon tag. The result seems pretty nice, but is it just me or does the line at the top seems a bit thin? What might be the reason for this?

Here's the code:

<svg height="550" width="500">
   <polygon points="25 0, 25 0, 150 0, 150 50, 25 50, 0 25" fill="white" stroke-width="2" stroke="black"/>
</svg>

Here's a picture of the generated SVG:

Answer 1

The line at the top is at y co-ordinate 0.

The line has a stroke width of 2 so 1 the line extends from -1 to 1 in the y direction (1/2 the stroke-width is on either side of the y co-ordinate).

Your svg viewport extends from 0, 0 to 550, 500. You can't see the half of the line that is outside the viewport so it looks thinner.

Answer 2

As Robert commented, the top line of the element is halfway outside the SVG canvas

I added a red border to your code that shows the border of the SVG canvas

<svg height="550" width="500"  style="border:1px solid red;">
   <polygon points="25 0, 25 0, 150 0, 150 50, 25 50, 0 25" fill="white" stroke-width="2" stroke="black"/>
</svg>

There are two solutions:

1. Draw a new element with a y-coordinate equal to or greater than 1 pixel In the example below, I just add 1px coordinate at all nodes of the polygon

<svg height="550" width="500"  style="border:1px solid red;">
   <polygon points="25 1, 25 1, 150 1, 150 51, 25 51, 0 26" fill="white" stroke-width="2" stroke="black"/>
</svg>

2. Or add ViewBox

<svg height="550" width="500" viewBox="0 49 550 500" style="border:1px solid red;">
   <polygon points="25 0, 25 0, 150 0, 150 50, 25 50, 0 25" fill="white" stroke-width="2" stroke="black"/>
</svg>