title: How to prevent inconsistent thickness and gaps in SVG lines?
body: <p>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 <code>calc(100vmin / &lt;gridSize&gt;)</code>. The SVG elements are simple: </p>
  
  <p><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"&gt;
    &lt;path stroke-width="2" stroke="#000" stroke-linecap="square" d="M0,50 h100 M50,0 v50"/&gt;
  &lt;/svg&gt;
  </code></p>
  
  <p>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.</p>
  
  <p>I tried to round the pixels from the <code>calc</code>, but I am using <code>styled-components</code> so I am unable to use SASS / LESS functions like <code>floor / ceil</code>. I also noticed making the stroke width thicker alleviates the problem, but I would prefer to keep my lines thin.</p>
  
  <p>Are there other ways I can make the lines consistent?</p>
  
  <p><a href="https://i.stack.imgur.com/dINJR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dINJR.png" alt="image"></a></p>