Why is my SVG line blurry or 2px high when I specified 1px?

Question

I create a line with SVG and appears blurry on my webpage. To be more clear, it seems to be larger than the stroke width of 1px. Why is this happening, and is there a way to fix this in SVG?

Here is the code. When I run this code on its own, it is not blurry. When it's on my webpage, the line seems to be about 2px high, not 1.

#HorizontalLine1178 { stroke:rgb(154,154,154); stroke-width:1; } 

 <svg style="width:100%;"> <line id="HorizontalLine1178" y2="97" y1="97" x2="100%" x1="62" > </svg> 

Answer 1

Because when its Y coordinates lie on the whole pixel, then the 1px stroke around it and, thus, is “smoothed out”. Use half pixel coordinates in this case, or apply shape-rendering="crispEdges" , which will do pixel rounding for you, but will produce sharp edges even on rounded objects:

 rect , circle, line { stroke: rgb(154,154,154); stroke-width: 1; fill: none; } 

 <svg style="width:100%;"> <line y2="10.0" y1="10.0" x2="90%" x1="10" /> <line y2="15.5" y1="15.5" x2="90%" x1="10" /> <line y2="20.0" y1="20.0" x2="90%" x1="10" shape-rendering="crispEdges" /> <circle cy="50" cx="20" r="10" /> <circle cy="50" cx="50" r="10" shape-rendering="crispEdges" /> <rect x="90" y="40" width="20" height="20" /> <rect x="120" y="40" width="20" height="20" shape-rendering="crispEdges" /> <rect x="149.5" y="39.5" width="20" height="20" /> <rect x="190" y="40" width="20" height="20" style="stroke: none; fill: black" /> </svg>