Why is my SVG with position absolute not exactly at the edge?
<p>Whenever I try to position a scaled SVG with <code>position: absolute;</code>, and use 0 as the positioning parameter (i.e. <code>top:0;</code>) the svg does not seem to connect seamlessly.</p>

<p>Especialy when zooming or when creating a responsive layout, this seems to occure.</p>

<p>Consider the following example:</p>

<p>an item with SVG's as rounded corners:</p>

<pre><code>&lt;div class="item"&gt;
        &lt;svg class="corner top-left" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"&gt;

          &lt;path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/&gt;
          &lt;line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/&gt;
        &lt;/svg&gt;
        &lt;svg class="corner top-right" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"&gt;

          &lt;path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/&gt;
          &lt;line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/&gt;
        &lt;/svg&gt;
        &lt;svg class="corner bottom-left" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"&gt;

        &lt;path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/&gt;
        &lt;line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/&gt;
        &lt;/svg&gt;
        &lt;svg class="corner bottom-right" 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 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"&gt;

        &lt;path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/&gt;
        &lt;line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/&gt;
        &lt;/svg&gt;
&lt;/div&gt;
</code></pre>

<p>The corners are positioned with <code>position: absolute;</code> and rotated in css</p>

<pre><code>.corner {
  position: absolute;
  height: 20px;
}
.top-left {
  left: 0;
  top: 0;
}
.top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}
.bottom-left {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
</code></pre>

<p>Now, depending on your screen resolution, you'll see the corners won't all fit seamlessly to the edge. Also when zooming in/out to the website oyu'll see a gap between the SVG and the edge of the element.</p>

<p>A dirty fix is to just offset the element minus 1 pixel in the direction it is positioned. However, the gap seems to be smaller than 1 pixel, thus breaking the design of the element when offsetting 1 pixel. Also, the gap does not appear all the time, only at certain pixel breakpoints.</p>

<p>Does anyone know how to fix this?</p>

<p><strong><a href="https://jsfiddle.net/pafke/eamn3u54/" rel="nofollow noreferrer">FIDDLE</a></strong></p>

<p>To clarify, I want to prevent these lines from happening:</p>

<p><a href="https://i.stack.imgur.com/DjkrJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DjkrJ.jpg" alt="enter image description here"></a></p>