Where does the gap come from, and how to get rid of it?

Question

A simple document:

svg {
  background-color: blue;
}
div {
  background-color: green;
}
svg, div {
  width: 100%;
  height: 100px;
}

<svg></svg>
<div></div>

And just in case it's just on my system (Chrome/Mac), here's how it comes out:

I can't see any margin or border on either element, but there is a gap between the two elements. And it only happens with a svg there: if I replace the svg with another div, no gap.

Where does it come from, and how do I make it go away?