Why don t my SVG images scale using the CSS width property

Question

I m building a portfolio website   HTML Code     lt div id    hero  gt      lt div id    social  gt         lt img src    facebook svg  gt         lt img src    linkedin svg  gt         lt img src    instagram svg  gt       lt  div gt   lt  div gt    CSS code  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                      The problem is that I m not able to resize SVGs using the CSS width property  Here is what I obtain in different cases   img   width  2em       img   width  3em       img   width  em       Please note how icons collapse toward the middle of the hero div   Instead  if I use the CSS height property   img   height  2em       img   height  3em       img   height  4em       This behaviour is what I need  but I m not sure this is the right way  Why this happens  Do you know better ways of resizeing SVG images  especially using the flexbox model

User · Answer

You can also use the transform  scale  quot  quot   option

User · Answer

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    have no width and height defined  or 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

User · Answer

Open SVG using any text editor and remove width and height attributes from the root node  Before  lt svg width  quot 12px quot  height  quot 20px quot  viewBox  quot 0 0 12 20 quot       After  lt svg viewBox  quot 0 0 12 20 quot       Now the image will always fill all the available space and will scale using CSS width and height  It will not stretch though so it will only grow to available space

User · Answer

If the svg file has a height and width already defined width  100  height  100  in the svg file then add this x  0px  y  0px  width  100  height  100  viewBox  0 0 100 100  while keeping the already defined width  100  height  100    Then you can scale the svg in your css file by using a selector in your case img so you could then do this  img height  20px  width  20px   and the image will scale

User · Answer

I had to figure it out myself but some svgs your need to match the viewBox  amp  width height in  E g  if it already has width  quot x quot  height  quot y quot  then   gt  add  lt svg     viewBox  quot 0 0  width   height  quot  gt  and the opposite  After that it will scale with  lt svg     style  quot width  xxx  height  yyy  quot  gt

User · Answer

The transform CSS property lets you rotate  scale  skew  or translate an element   So you can easily use the transform  scale 2 5   option to scale 2 5 times for example

User · Answer

You have to modify the viewBox property to change the height and the width correctly with a svg  It is in the  lt svg gt  tag of the svg   https   developer mozilla org en docs Web SVG Attribute viewBox

[html] Why don’t my SVG images scale using the CSS "width" property?

Examples related to html

Examples related to css

Examples related to svg

Examples related to sass