Spurious margin on svg element

This is a common issue with inline elements. To solve this, simply add vertical-align:top.

UPDATED EXAMPLE HERE

#foo {
    background: #fff;
    vertical-align:top;
}

It’s worth noting that the default value for the vertical-align property is baseline. This explains the default behavior. Values such as top, middle, and bottom will correct the alignment.

Alternatively, you could make the element block level. (example)