how to handle SVG pixel snapping
I am trying to render two svg lines using path element. The first line has 1px width and it is sharp The second line has 2px width and it is blurred The stroke-width is the same for both. How to fix this <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path style="stroke-width:1;stroke:red;opacity:1;" d="M 300.5 250 L 300.5 300 "></path> <path style=" stroke-width:1;stroke:red;opacity:1;" d="M 350 250 L 350 300 "></path> </svg> Mainly it's the 0.5 offset that makes the line sharp. By default, integer coordinates map to the intersections of the pixel squares. So a width-1 horizontal