Menu
I'm creating a line with SVG and it is appearing blurry in my web page. To be more clear, it appears larger than the stroke width of 1px. Why is this happening and is there a way to fix it in SVG?
Here is the code. When I run this code by itself it is not blurry. When it's in my web page the line appears to be about 2px in height rather than 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>
966
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. You can use this attribute with the following SVG elements: <altGlyph> <circle> <ellipse>
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
Alternatively, some compressors like Nano will insert missing namespaces into your SVG if required, and remove unnecessary namespace tags and attributes which causes huge file size. 3. SVG appears to be blurry or distorted Sometimes your SVG seemed to be blurry and not as sharp as your original design on editor.
Chances are, the majority of your shapes will be single pixels stroke widths, and it is far easier to draw on rounded coordinates, e.g (10, 10), therefore, we have adjusted the SVG viewBox by (-0.5, -0.5), essentially offsetting the coordinate system ever so slightly, so users can easily draw on grid and automatically get sharp images.
The reason it is "blurry" is due to anti-aliasing. When the edge of a line or shape only partly covers a pixel, the browser approximates that partial coverage by drawing a semi-translucent pixel. For example, if your background is white and the edge of a black shape only covers half a pixel.
If you are making SVG images manually, you will be required to constantly offset shapes with odd stroke width (1, 3, 5) by 0.5, to display these shapes sharply because only half a pixel is rendered on screen, but fortunately, there is an easier way. Getting sharp and crisp SVG images, the easy way.
Because when its Y coordinates lies on whole pixel, the 1px stroke is around it and thus "antialiased" (refer to Paul LeBeau's excellent illustration). Use half pixel coordinates in this case, or apply shape-rendering="crispEdges" that will do the pixel rounding for you, but will produce sharp edges even on rounded objects:
<svg style="width:100%; background-color: white" stroke="black" fill="white" stroke-width="1">
<line y2="10.0" y1="10.0" x2="90%" x1="10">
<title>.0</title>
</line>
<line y2="15.5" y1="15.5" x2="90%" x1="10">
<title>.5</title>
</line>
<line y2="20.0" y1="20.0" x2="90%" x1="10" shape-rendering="crispEdges">
<title>.0 + crispEdges</title>
</line>
<circle cy="50" cx="20" r="10">
<title>.0</title>
</circle>
<circle cy="49.5" cx="44.5" r="10">
<title>.5</title>
</circle>
<circle cy="50" cx="70" r="10" shape-rendering="crispEdges">
<title>.0 + crispEdges</title>
</circle>
<rect x="90" y="40" width="20" height="20">
<title>.0</title>
</rect>
<rect x="120" y="40" width="20" height="20" shape-rendering="crispEdges">
<title>.0 + crispEdges</title>
</rect>
<rect x="149.5" y="39.5" width="20" height="20">
<title>.5</title>
</rect>
<rect x="190" y="40" width="20" height="20" stroke="none" fill="black">
<title>.0 + fill, no stroke</title>
</rect>
<rect x="219.5" y="39.5" width="20" height="20" stroke="none" fill="black">
<title>.5 + fill, no stroke</title>
</rect>
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
