title: SVG as a CSS Background - Is there ANY way to repeat-x with NO space in between?
body: <p>In Webkit and Blink-based browsers, SVGs do not tile correctly. There is a space between the images at various zoom levels. There are a number of topics on StackOverflow addressing this, all marked as solved, but those people must not have tested their solutions thoroughly enough.</p>
  
  <p>My SVGs are a perfectly even number of pixels (130 x 24).
  They have background-size set to 130px 24px.
  They are set to preserveAspectRatio="none".
  There is absolutely zero empty space on the edges of the SVG.</p>
  
  <p>Yet, while it looks fine at 100%, there is still a thin space between the SVGs if you zoom in to the right level.</p>
  
  <p>It surprises me this bug has not been reported before, given the widespread recommendations of using SVGs for backgrounds.</p>
  
  <p>Here is the exact SVG:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 130 24" xml:space="preserve" preserveAspectRatio="none"&gt;
      &lt;style type="text/css"&gt;
       .st0{fill:#A5EF8B;}
      &lt;/style&gt;
      &lt;path class="st0" d="M0,12c32.5,0,32.5,12,65,12s32.5-12,65-12V0C97.5,0,92.9,12,65,12C32.5,12,20.7,0,0,0"/&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can confirm this behavior with other SVGs as well, such as the ones at <a href="https://www.heropatterns.com/" rel="noreferrer">https://www.heropatterns.com/</a></p>
  
  <p>Codepen for testing: <a href="https://codepen.io/TelFiRE/pen/gJzqaG" rel="noreferrer">https://codepen.io/TelFiRE/pen/gJzqaG</a></p>
  
  <p>The space between the images is usually sub 1 pixel (meaning the line is just a lighter shade of green). It's subtle and may be hard to see if you have a dull monitor.</p>
  
  <p>In asking this question, I'm hoping to understand WHY it is occurring in a way that lets me make lots of repeating SVG backgrounds without issue. It's not just about the one image, so I want to avoid hacky solutions/workarounds if at all possible. For example, chopping 2 pixels off the edge fixes it 99% of the way, but not entirely, and it leaves me wondering what I would do if I actually needed those two pixels. This particular SVG looks okay like that but more complicated patterns would be knocked out of alignment.</p>