Difference Between Display Inline And Block On Svg Elements

I understand the difference when it comes to divs. But in svg:

This can be seen by placing a svg within a div. If the svg is 24px. high, the div will have a height of (for instance) 29 px.

display="block" will prevent the svg to reserve that space, so the div wherein the svg is placed will have the same height.

Solution 3:

In my practice, when I use <svg> tag -- browser (Google Chrome Version 80.0.3987.100 (Official Build) (64-bit)) interpret it as inline element by default. And it behaves as a standart inline element. If complines display: block css-property for it -- it behave as standart block element

If we make some research and fall into computed tab in the dev tools on any svg-child element then we'll see that it has the display inline property. Even if we'll set svg display: block the svg-child elements stay inline elements by default