Why does 100% equal 150 pixels?

Question

The following code results in a table that 150 pixels tall. Why 150? Is this an SVG quirk or something more general?

https://jsfiddle.net/cc9tyw5v/31/

Answer 1

The span you are attempting to fit the height of is not the parent of the SVG. It is a sibling, and therefore height:100% will not fit its height.

Answer 2

According to this source

SVG isn't (just) an image. SVG is a document. The default size for HTML replaced elements will be used: 300px wide, 150px tall. This applies for <img>, <object> or <iframe>. The default 300x150 size also applies to inline <svg> elements within HTML documents, but that's a relatively recent consensus from the HTML5 specifications: other browsers will by default expand inline SVG to the full size of the viewport—equivalent to width: 100vw; height: 100vh; — which is the default size for SVG files that are opened directly in their own browser tab. Internet Explorer cuts the difference, using width of 100% and height of 150px for images and inline SVG.