title: SVG makes white lines in the browser
body: <p>I made a 24x24-pixel logo. It consists of polygons that stand side by side.</p>
  
  <p>I'm showing this in various sizes on my web page in the range of <strong>40 pixels</strong> and <strong>24 pixels</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/ZCfBx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZCfBx.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;svg version="1.1" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"&gt;
  &lt;polygon points="6,20 4,16 2,20 "/&gt;
  &lt;polygon points="4,16 2,12 0,16 "/&gt;
  &lt;polygon points="6,12 4,8 2,12 "/&gt;
  &lt;polygon points="8,8 6,4 4,8 "/&gt;
  &lt;polygon points="10,12 8,8 6,12 "/&gt;
  &lt;polygon points="14,12 12,8 10,12 "/&gt;
  &lt;polygon points="18,12 16,8 14,12 "/&gt;
  &lt;polygon points="22,12 20,8 18,12 "/&gt;
  &lt;polygon points="12,16 10,12 8,16 "/&gt;
  &lt;polygon points="20,16 18,12 16,16 "/&gt;
  &lt;polygon points="4,16 6,20 8,16 "/&gt;
  &lt;polygon points="2,12 4,16 6,12 "/&gt;
  &lt;polygon points="0,16 2,20 4,16 "/&gt;
  &lt;polygon points="4,8 6,12 8,8 "/&gt;
  &lt;polygon points="6,4 8,8 10,4 "/&gt;
  &lt;polygon points="8,8 10,12 12,8 "/&gt;
  &lt;polygon points="16,8 18,12 20,8 "/&gt;
  &lt;polygon points="18,12 20,16 22,12 "/&gt;
  &lt;polygon points="10,12 12,16 14,12 "/&gt;
  &lt;polygon points="8,16 10,20 12,16 "/&gt;
  &lt;polygon points="16,16 18,20 20,16 "/&gt;
  &lt;polygon points="20,16 22,20 24,16 "/&gt;
  &lt;polygon points="10,20 8,16 6,20 "/&gt;
  &lt;polygon points="14,20 12,16 10,20 "/&gt;
  &lt;polygon points="18,20 16,16 14,20 "/&gt;
  &lt;polygon points="22,20 20,16 18,20 "/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>But white lines form between svg elements...
  For example:</p>
  
  <p><a href="https://i.stack.imgur.com/JN6J6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JN6J6.png" alt="enter image description here"></a></p>
  
  <p>Original svg file: <a href="http://www.onurboz.com/bz.svg" rel="nofollow noreferrer">bz.svg</a></p>
  
  <p>I can't combine them because in some cases I color each one separately. How can I fix this?</p>