Is there different types of .svg?

Question

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? example

Also, if I put a SVG which takes up the whole width of webpage into a flex box, 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.example(fixed with class = "flex" instead of id).

I am also wondering how does the computer determine what size should the SVG decreased to? I have tried a few SVG(which take whole width) and almost each of them will decreased to a value near 150px x 150px in the flex box.

Answer 1

outer <svg> elements are replaced elements in CSS/HTML parlance and follow the rules for replaced element sizing

In particular if replaced elements have no defined size the browser falls back to a size of 300px x 150px, which is likely what you're seeing.

Normal i.e. raster images always have a defined size and are not replaced elements.

See also the SVG specification for how CSS affects SVG sizing