SVG rectangle blurred in all browsers

Question

This SVG looks blurry in all browsers, at all zoom levels.

<svg xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     width="240" height="240" version="1.1">
  <rect width="200" height="200" x="20" y="20"
        ry="20" style="fill:#fff;stroke:#000" />
</svg>

In Chrome, Safari and Firefox it looks like this:

If you zoom in you can see that the stroke has a two pixel width, even though the default stroke width is 1px. Manually setting it to 1px does not affect the output.

Answer 1

This has to do with the pixel rastering. The line-width is 1px and it is centered at (20,20). It is drawn between 19.5 and 20.5 px, so that the browser has to color both pixels to "use enough ink".

Solution: Use 19.5 as coordinates to be in the pixel raster.

<svg xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     width="240" height="240" version="1.1">
  <rect width="200" height="200" x="19.5" y="19.5"
        ry="20" style="fill:#fff;stroke:#000" />
</svg>

Edit:

In the following image, the blue dot has size of 1px and is located (centered) at (1,1). All four pixels will be colored to get a pixel image that is as close as possible to the not displayable dot.