3

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.

enter image description here

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.

Jordan
  • 2,245
  • 6
  • 19
  • Could you please post the css of the wave svg and background? – Weilory Oct 29 '20 at 23:59
  • 1
    I've seen this where you have an element and it's draw next to the same element exactly 0 pixels apart. The pixel gap can appear due to a rendering issue with some browsers. One remedy is to have the two elements be drawn one pixel on top of each other. In your case, maybe just simply draw a second rectangle on top of the lower part and have it be 1 pixel higher than the lower part. I hope that makes sense. – Sivak Oct 30 '20 at 00:13
  • @Sivak Great idea. Fixed my problem by adding in -1px top/bottom margins for each. Thanks – Jordan Oct 30 '20 at 15:20

2 Answers2

1

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

Jordan
  • 2,245
  • 6
  • 19
0

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

Without flex:

enter image description here

With flex wrapper:

enter image description here

.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>
Adam
  • 25,960
  • 22
  • 158
  • 247