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?
SVGs
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.
- 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:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 299.99998 300.00833"
height="300.00833"
width="300"
-
I am not sure what you are describing here. This is what I can observe:
-
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:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started
