Flex box and svg image inside it

Hi. I am currently learning css and I have encountered some question about the SVG img. I have discovered that some SVG will take up the whole width of webpage if their width or height are not set, while some don’t and have a defined size. What does this property called? Is it related to the design of SVG image?

If I put display:flex; on the container containing the SVG which take up the whole width of webpage, the SVG will decrease in size. Why does this happen? Considing that a normal image and a SVG with defined size will not decrease the size in the same situation.
Detail example

I also wondering how does the computer determine what size should the SVG decreased to? I have tried a few SVG and almost each of them will decreased to value near 150px x150px inside the flex box.

Anyone know the answer?

  1. Just height and width. You can simply save SVGs and open them in an editor. e.g. This is the beginning of the green image with height and width:
   viewBox="0 0 299.99998 300.00833"
  1. I am not sure what you are describing here. This is what I can observe:

  2. Not sure where you are getting these 150px from …

Studying the structure of SVGs a little might actually be interesting to you. You can manipulate and animate them. e.g. animation library anime.js

Here is an intro that explains the structure: