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