SVGs are inline elements

So, I just found out that SVG elements are displayed inline by default. This has the “strange” effect that you get an overflow (which is not apparent, e.g., from the output of the Chrome debugging view) when you try to fill a parent element with a SVG. The following code shows how a scroll bar shows up for “no reason”:

To solve this issue all you have to do is to change the display  attribute of the SVG, e.g., to  block :

Try it yourself here: https://jsfiddle.net/mgbckr/ebvso38v/

The reason for this is nicely explained in a StackOverflow post like this:

inline or inline-block elements are called “inline” because they are intended to be laid out amongst lines of text. So, wherever they appear, space is reserved for the “descent”, which is the area underneath a line of text where the dangly parts of lowercase g’s, j’s, and y’s go.

 

Leave a Reply

Your email address will not be published. Required fields are marked *