Why don’t my SVG images scale using the CSS "width" property?
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
andheight
defined, or - have
width
andheight
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.
I had to figure it out myself but some svgs your need to match the viewBox & width+height in.
E.g. if it already has width="x"
height="y"
then =>
add <svg ... viewBox="0 0 [width] [height]">
and the opposite.
After that it will scale with <svg ... style="width: xxx; height: yyy;">
- If the svg file has a height and width already defined
width="100" height="100"
in the svg file then add thisx="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"
while keeping the already definedwidth="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.