Difference Between Display Inline And Block On Svg Elements

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

SVG is not HTML, it has no concept of reflow (i.e. changes in the position of one element do not affect other elements apart from tspan and tref in text).

Solution 2:

I searched for this because I have an svg in a page where the height of the surrounding element is 5px more than the actual height of the svg.

As far as I can see it does make a difference if you use display="none", display="block" or display="inline".

Just as an image there is space below a svg. Because they are, by default, inline-block elements (inline in some browsers). As such, they sit alongside text: the space that's visible under an svg is there for descenders on letters like 'p' and 'q'.

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