Question

When i try to render this svg sample, the line is bluring automatically and has 2px height:

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >                  
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" />
</svg>

But when Y coordinates becomes 250.5, all is OK – line has 1px height.

It would be a solution (adding 0.5 pixels), but I need to use scale transform on elemets. On transformed elemets the problem again.

How to solve it?
Thanks.

Answer 1

By blurring you mean anti-aliasing. Try the crisp-edges rendering mode, e.g.:

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >                  
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" shape-rendering="crispEdges" />
</svg>