Alignment trouble with SVG shape divider [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm trying to replicate the ever so popular shape dividers with my own SVG.
I created an SVG in Illustrator and a similar version in Inkscape. Both have the same issue aligning to the bottom: There is a slim gap between it and the following div.
Example of the gap
This behavior is unique to my SVG, others I've found on the internets do not have this issue.
The margin on the section is set to 0, and changing the CSS height for #section-2-55348 svg changes the size of the gap.
#section-2-55348 {
position: relative;
overflow: hidden;
}
#section-2-55348 svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
fill: #003767;
}
<svg 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 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>

Answer 1

In the next example svg{display:block;} makes the difference. I hope this is what you need.
*{margin:0; padding:0;}
svg{fill: #003767;display:block;}
div{background:#003767;min-height:5em;}
<svg 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 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>
<div></div>

Answer 2

Not exactly sure what is going on here for you but I have a workaround that might help you. It's not very elegant but you can set a negative margin on your svg. I would recommend giving your SVG an ID so that this margin does not get applied to other SVGs on the page.
svg#my-svg-id {
margin: -5px;
}
It's a little hacky but since I'm not exactly sure about what the code on the rest of the page looks like, that's the best option I could think of.