Inconsistent SVG lines despite shape-rendering

Question

Why are some of my lines in svg thicker than others? All of them are on whole number coords. "stroke-width: 0.5" was my last attempt to create 1px line. I had tryed also elsewhere mentioned shape-rendering: crispedges with stroke of 1 pixel but with same setup those lines which appears thicker on image were straight 2px instead of 1. I would love to fix that somehow but even knowledge about how its determined which lines get thicker by what rule would be very appretiated. I dont understand why its so hard to make consistent 1px thick line using svg.

My code:

#my-svg {
   width : 500px;
   height: 500px;
   margin: .5em;
}
#my-svg line {
  stroke:black;
  stroke-width:0.5;
}

<svg id="my-svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 500">
  <line x1="0"  y1="26"   x2="380" y2="26" ></line>
  <line x1="0"   y1="52"  x2="380" y2="52" ></line>
  <line x1="0"   y1="78"  x2="380" y2="78" ></line>
  <line x1="0"   y1="104" x2="380" y2="104"></line>
  <line x1="0"   y1="130" x2="380" y2="130"></line>
  <line x1="0"   y1="156" x2="380" y2="156"></line>
  <line x1="0"   y1="182" x2="380" y2="182"></line>
  <line x1="40"  y1="0"   x2="40"  y2="182"></line>
  <line x1="240" y1="0"   x2="240" y2="182"></line>
  <line x1="300" y1="0"   x2="300" y2="182"></line>
  <line x1="380" y1="0"   x2="380" y2="182"></line>
</svg>

Example when using stroke-width: 1 and shape-rendering: crispedges:

there is no pixels in SVG, and your question does not respect the rules of use of StackOverflow https://stackoverflow.com/help/minimal-reproducible-example — Mister Jojo, Mar 23 '20 at 00:48
stroke bleeds from each sides of the coords, so you need to draw a 1px line at n.5 coords to get a solid 1px line. [Here is a answer of mine](https://stackoverflow.com/questions/49733682/html-5-canvas-lineto-line-color-issues/49734715#49734715) on the same issue for canvas until I find a better dupe for SVG. — Kaiido, Mar 23 '20 at 01:04
@MisterJojo i have added my (minimal example) code below but it is just same as on the screenshot - nothing more — astromedia, Mar 23 '20 at 10:49
@Kaiido i thought so but that would make all lines have same problem - in my case some of them are thicker than others despite same settings ... it seems as Eduard suggested below to be browser drawing issue sadly (until somebody provides better explanation) so it is not duplicate to any other similar question about 1px thickness problem on SO i was able to find despite being simmilar. — astromedia, Mar 23 '20 at 10:52
It is the same issue, you can't draw half a pixel so having a 0.5 px stroke will make the antialiasing to kick in. Just set a 1px stroke and offset your coords by half a pixel. — Kaiido, Mar 23 '20 at 11:51
@Kaiido So you are telling me antialiasing just randomly kicks in for some lines and not for others? And why when i use "shape-rendering: crispedges; stroke-width: 1;" as i mentioned some of them are crisp 1px and some of them are crisp 2px thick? How can antialiasing infulence that when i turn it off by "shape-rendering: crispedges;"? — astromedia, Mar 23 '20 at 13:14
I have added second screenshot with turned of antialiasing - dont tell me im only one who is seeing that? @MisterJojo — astromedia, Mar 23 '20 at 13:15
this kind of display can happen when a scaling is present, on the browser itself or on the relationship between the viewbox and the width / height values, or even depending on the preserveAspectRatio. but anyway, we stay in vector and no SVG interpreter can guarantee a perfect wysiwyg — Mister Jojo, Mar 23 '20 at 13:21
i see, i had tryed my best (used viewbox with set width and height, no zoom in browser) - drawing exactly same thicknes lines several times under each other was supposed to be simple task but i suppose in web development pixel perfect things just dont work :/ ... thx for aditional info. I suppose i will try canvas instead for this - it will take more effort but it should be more stable i suppose. — astromedia, Mar 23 '20 at 13:28
Yes it's what I'm telling you. Please have a look at [this answer](https://stackoverflow.com/a/49734715/3702797) where I explain what happens when you stroke out of pixel boundaries. When you apply the CSS rule `shape-rendering: crips-edges`, all the browser does is to fill the pixels on closest pixel boundaries. So when you draw a 1px line that overlaps on two pixels it will randomly either be floored to a single pixel, either be ceiled to two pixels. But the fix is easy: If you want pixel perfect 1px lines, then draw a 1px lines with a 0.5px offset: https://jsfiddle.net/1dLtwqp8/ — Kaiido, Mar 23 '20 at 13:57
I see, it is still weird hack but i have to admit your example seems to be working ... i had tryed it before using css translate on svg element it self but it does not seemed to have effect so i (kinda hastely) moved on. That transform attribute on g element seems to work. Im still having hard time wrapping my head around why on some whole number coords its 1px and on some 2px (i thought that rounding should always happen in my opinion) but whatever, thx for your help. — astromedia, Mar 23 '20 at 14:05

score 1 · Answer 1 · answered Mar 23 '20 at 00:53

i used a html document and a seperated online editor to check your code twice. Your code is corect! It seems to be a browser visualisation error...

Quick tip: your code line can also end like this: stroke:black; stroke-width:0.5" />

If the error persists, please provide us with additional information such as browser, version, full code review, etc.

The Way it work for me:

<!DOCTYPE html>
<html>
<body>

<svg height="500" width="500" viewbox="0 0 500 500">
  <line x1="0" y1="26" x2="380" y2="26" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="52" x2="380" y2="52" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="78" x2="380" y2="78" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="104" x2="380" y2="104" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="130" x2="380" y2="130" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="156" x2="380" y2="156" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="182" x2="380" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="40" y1="0" x2="40" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="240" y1="0" x2="240" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="300" y1="0" x2="300" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="380" y1="0" x2="380" y2="182" style="stroke:black; stroke-width:0.5" />
  
  
</svg>

</body>
</html>

I was afraid it could be browser visualisation error as you say. What surprised me was fact it happened in both Firefox (56.0a1 (2017-07-31) (64-bit) - as far as im aware they have custom draw engine) and Maxthon (v5.3.8.2100 - chrome based). I suppose that means i cant do anything about it :/ It can also be i suppose combination of graphic drivers and browser - it would not be first time i saw svg behave very weirdly and unstable on some machines :/ ... thx for response. — astromedia, Mar 23 '20 at 10:35

Inconsistent SVG lines despite shape-rendering

1 Answers1