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](https://i.stack.imgur.com/IfQ1i.png)

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.

```css
#section-2-55348 {
  position: relative;
  overflow: hidden;
}

#section-2-55348 svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: #003767;
}
```

```html
<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: 
In the next example `svg{display:block;}` makes the difference. I hope this is what you need.

```css
*{margin:0; padding:0;}
svg{fill: #003767;display:block;}
div{background:#003767;min-height:5em;}
```

```html
<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>
```
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.

```css
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.