White gap between SVG and div

Question

This is not a duplicate of any current questions that I can find. I have tried answers such as adding block/flex to the SVG element but I believe this is a different .

I am using Tailwind if that is of any relevance.

This is one of the multiple, different SVGs that this issue is present on:

<svg style="width: 100%" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" y="0px" x="0px" xml:space="preserve" version="1.1" viewBox="0 0 1917.4503 99.737572" id="Untitled-Page%201">
    <metadata id="metadata64">
      <rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:work></rdf:rdf>
    </metadata>
    <defs id="defs62">
      <clipPath id="clipPath83" clipPathUnits="userSpaceOnUse">
        <rect y="4.6582928" x="1.9868355" height="520.61298" width="1913.6428" id="rect85" style="fill: #0000ff; fill-rule: evenodd"></rect>
      </clipPath>
      <clipPath id="clipPath101" clipPathUnits="userSpaceOnUse">
        <rect y="2.0105031" x="1.6986296" height="99.737572" width="1917.4503" id="rect103" style="fill: #0000ff; fill-rule: evenodd"></rect>
      </clipPath>
    </defs>
    <g transform="translate(-1.6986296,-2.0105031)" clip-path="url(#clipPath101)" id="g79">
      <path id="110" d="m -92.8182,485.3333 c 148.4834,-10.021 80.7045,-8.8997 264.4613,-8.8997 211.3321,0 442.2889,49.5664 666.4687,49.5664 255.8733,0 518.9805,-59.2854 737.5684,-59.2854 335.3557,0 441.894,29.1565 441.894,29.1565 L 2035,256 c 0,0 -38.1606,11.5786 -106.04,22.415 L 1919,33.9229 c 0,0 -67.2518,32.8281 -278.9438,32.8281 C 1502.0735,66.751 1335.988,0 1174.4691,0 1032.9564,0 887.1659,55.8081 753.7633,55.8081 619.0213,55.8081 489.1034,1.0942 387.7024,1.0942 230.6074,1.0942 -14,33.9229 -14,33.9229 l -0.0303,192.3195 c 0,0 -30.8519,-4.4524 3.0303,-5.3425 v 77.905 c -115.2449,9.8118 -4.7734,-2.7802 -103.0303,4.7102" fill="#4d5061"></path>
    </g>
  </svg>

I have multiple SVG elements that I am using to create a wave-like effect. In the picture below, you can see the top section which is the SVG and underneath it you can see the background of the content.

This issue only appears at certain resolutions and the thickness of the line varies between what appears to be half a pixel and 1 pixel in height.

The behaviour occurs both when the SVG is inline or as an IMG. The SVG itself is styled to be 100% width with height set to auto.

I've noticed that tweaking the viewbox allows the SVG to line up properly but this only makes the gap appear at different resolutions instead.

I need a solution that will make this wave SVG sit flush with no pixel gap on all devices, and ideally an explanation to why it is behaving this way because I've been bashing my head against this for too long.

There are multiple SVGs and this problem occurs with all of them.

Answer 1

I came here with a similar problem, except in my case I have background-image set to url(asd.svg).

As margins can't be set on background images, I was able to resolve my issue by setting:

background-position: 0 -1;

i.e. pushing the image up by a pixel.

Answer 2

In case this helps anyone: I had fixed the svg, I added preserveAspectRatio="none", I tried negative margins and nothing fixed it. Turns out it was the zoom setting in responsive view in chrome.

(See where it says 75% above?) There I clicked and set it to 100% manually and the gap went away. Sometimes it has nothing to do with the SVG. Hope this helps someone!

Answer 3

You can put your image and the following div inside a flex with flex-direction colum.

Without flex:

With flex wrapper:

.box {
  height:100px;
  background-color:#00cba9;
margin:0;  
  
}

svg{
  padding-bottom:0;
  margin-bottom:0;
  border:solid red 3px;
}

.wrapper{
  display:flex;
  flex-direction: column;
}

<div class="wrapper">
    <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#00cba9" fill-opacity="1" d="M0,32L46.5,256L92.9,288L139.4,192L185.8,192L232.3,192L278.7,192L325.2,64L371.6,128L418.1,64L464.5,288L511,160L557.4,128L603.9,128L650.3,32L696.8,160L743.2,0L789.7,0L836.1,64L882.6,96L929,64L975.5,64L1021.9,32L1068.4,224L1114.8,160L1161.3,96L1207.7,224L1254.2,64L1300.6,128L1347.1,160L1393.5,0L1440,320L1440,320L1393.5,320L1347.1,320L1300.6,320L1254.2,320L1207.7,320L1161.3,320L1114.8,320L1068.4,320L1021.9,320L975.5,320L929,320L882.6,320L836.1,320L789.7,320L743.2,320L696.8,320L650.3,320L603.9,320L557.4,320L511,320L464.5,320L418.1,320L371.6,320L325.2,320L278.7,320L232.3,320L185.8,320L139.4,320L92.9,320L46.5,320L0,320Z"></path></svg>
    <div class="box"></div>
</div>

Answer 4

Fixed this by adding a -1px margin to either the top or the bottom of SVG element to overlap the elements together.