Difference between display inline and block on svg

Question

I understand the difference when it comes to divs.

But in svg:

<svg>
    <rect display="block" id="svg_3" height="57" width="52" y="20" x="41" stroke-width="5" stroke="#000000" fill="#FF0000"/>

     <rect display="inline" id="svg_3" height="57" width="52" y="20" x="120" stroke-width="5" stroke="#000000" fill="#0000BB"/>
</svg>

Seems to produce the same result... ('none' hides the element tho) Here's the jsfiddle: https://jsfiddle.net/foreyez/3c7va377/

what's the difference, and what's the default value, inline or block?

Answer 1

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.

Answer 2

Per the SVG specification

A value of display: none indicates that the given element and its children shall not be rendered directly (i.e., those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.

So everything except none is treated exactly the same.

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).