CODEWITHSUNDEEP
csssvgstyled-components
PDN
PDN

Reputation: 791

How to prevent inconsistent thickness and gaps in SVG lines?

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?

image

Upvotes: 5

Views: 4336

Answers (3)

phil294
phil294

Reputation: 10852

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

comparison

Upvotes: 0

Joel
Joel

Reputation: 31

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

Upvotes: 3

Robert Longson
Robert Longson

Reputation: 124109

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

Upvotes: 5

Related Questions