How to prevent inconsistent thickness and gaps in SVG lines?

Question

My use case is probably a bit unique, but I am creating a dynamically-sized square grid using DOM elements encased in a flexbox. Each DOM element has an SVG image background and a height/width equal to calc(100vmin / <gridSize>). The SVG elements are simple:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <path stroke-width="2" stroke="#000" stroke-linecap="square" d="M0,50 h100 M50,0 v50"/> </svg>

However, I noticed that some lines appear darker than others, and there are gaps between some SVG lines. (See picture below) I'm assuming this is due to pixel rounding because when I resize the browser, the gaps and thicknesses jump around.

I tried to round the pixels from the calc, but I am using styled-components so I am unable to use SASS / LESS functions like floor / ceil. I also noticed making the stroke width thicker alleviates the problem, but I would prefer to keep my lines thin.

Are there other ways I can make the lines consistent?

Fertilizer

Answer 1

It's antialiasing. Setting shape-rendering="crispEdges" will turn it off on most UAs.

Ferromanganese

Thank you! This makes the line thickness consistent, but the gaps still remain. – Fertilizer

If your width is not exactly divisible by the number of lines that you're putting into it that's unavoidable isn't it. It's like dividing 10 by 3 and saying I don't want a remainder. – Ferromanganese

You're right, that appears to be a separate issue than SVG. I will mark your answer as accepted. – Fertilizer

This actually give me a worse result, on firefox, and chrome. However, combined with @Joel answer vector-effect='non-scaling-stroke', and an integer for stroke-width on Firefox, it fix the issue. On Chrome I recommend only vector-effect='non-scaling-stroke' with integer stroke-width. – Upmost

Answer 2

vector-effect='non-scaling-stroke'

non-scaling-stroke

This value modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shapeʼs path in current user coordinate system and filling that outline with the stroke paint (color or gradient). The resulting visual effect of this value is that the stroke width is not dependent on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.

MDN web docs

Jobina

On Chrome it work ! on firefox it make the line thicker on a <path/> element, but doesn't solve line thickness inconsistency. – Upmost

This is exactly what I was looking for and I didn't know this property existed. Thanks! – Aricaarick

Answer 3

stroke-linecap="round"

This changes the ends of the paths from the first default to the second rendering stroke type.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

Kiakiah

Why would that have an effect on line thickness? – Ferromanganese