Why don’t SVG images scale using the CSS “width” property?

Question

HTML

<div id="hero">    <div id="social">       <img src="facebook.svg">       <img src="linkedin.svg">       <img src="instagram.svg">     </div> </div> 

CSS using SASS

#hero {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     height: 300px;          #social {         width: 50%;         display: flex;         justify-content: space-between;         flex-wrap: wrap;          img {             width: 2em;         }     } } 

I’m not able to resize SVGs using the CSS width property. Here is what I obtain with different approaches (note how icons collapse toward the middle of the hero div):

img { width: 2em; }

img { width: 3em; }

img { width: 4em; }

However, if I use the CSS height property:

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

I get the behaviour I need, but I’m not sure this is the right way. Why does this happen? Do you know better ways of resizeing SVG images (especially using the Flexible Box Module)?

Answer 1

SVGs are different than bitmap images such as PNG etc. If an SVG has a viewBox - as yours appear to - then it will be scaled to fit it's defined viewport. It won't directly scale like a PNG would.

So increasing the width of the img won't make the icons any taller if the height is restricted. You'll just end up with the img horizontally centred in a wider box.

I believe your problem is that your SVGs have a fixed height defined in them. Open up the SVG files and make sure they either:

1. have no width and height defined, or
2. have width and height both set to "100%".

That should solve your problem. If it doesn't, post one of your SVGs into your question so we can see how it is defined.