title: How to get rid of unwanted thin borders in SVG? Different behavior (IE, Chrome, etc.)
body: <p>I am creating some SVG image that consists of multiple rectangles. Those rectangles are one next to the other, the edges "touch" each other, some browsers (e.g., Chrome, Vivaldi) and image converters render unwanted tiny lines between those rectangles. Meanwhile, some other browsers (IE, Edge) displays the SVG in the desired way.</p>
  
  <p>I checked the SVG in several browsers and in the Inkscape editor (I have exported the SVG into PNG, and the lines were also present).</p>
  
  <p>I can solve there problem with adding some tiny overlap, but I don't like such a solution.</p>
  
  <p>Is that a bug in SVG libraries used in browsers and Inkscape? Or shall I use some SVG feature to fix it?</p>
  
  <p><a href="https://i.stack.imgur.com/o2jIl.png" rel="nofollow noreferrer">Chrome example</a></p>
  
  <p><a href="https://i.stack.imgur.com/r7U6B.png" rel="nofollow noreferrer">Inkscape example</a></p>
  
  <p><a href="https://i.stack.imgur.com/hVBo9.png" rel="nofollow noreferrer">Edge example</a></p>
  
  <pre><code>&lt;svg height="10cm" viewBox="0 0 10 10" width="10cm" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;rect fill="#ff00ff" height="1" opacity="1" width="1" x="1" y="1"/&gt;
      &lt;rect fill="#ff00ff" height="1" opacity="1" width="1" x="2" y="1"/&gt;
      &lt;rect fill="#ff00ff" height="1" opacity="1" width="1" x="3" y="1"/&gt;
  
      &lt;rect fill="#167f81" height="1" opacity="1" width="1" x="1" y="2"/&gt;
      &lt;rect fill="#167f81" height="1" opacity="1" width="1" x="2" y="2"/&gt;
      &lt;rect fill="#167f81" height="1" opacity="1" width="1" x="3" y="2"/&gt;
  
      &lt;rect fill="#000000" height="1" opacity="1" width="1" x="1" y="3"/&gt;
      &lt;rect fill="#000000" height="1" opacity="1" width="1" x="2" y="3"/&gt;
      &lt;rect fill="#000000" height="1" opacity="1" width="1" x="3" y="3"/&gt;   
  &lt;/svg&gt;
  </code></pre>