Why don’t SVG images scale using the CSS “width” property?
HtmlCssSvgSassHtml Problem Overview
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)?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
> 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.
Solution 3 - Html
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;">
Solution 4 - Html
- If the svg file has a height and width already defined
width="100" height="100"
in the svg file then add thiswidth="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.
Solution 5 - Html
Open SVG using any text editor and remove width
and height
attributes from the root node.
Before
<svg width="12px" height="20px" viewBox="0 0 12 20" ...
After
<svg viewBox="0 0 12 20" ...
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.
Solution 6 - Html
If it's not too much problem then you can just import through an image HTML tag and then resize it comfortably while also letting the parent element know that they have been resized then you can use them as an image by importing them through an HTTP request in the image tag. That will solve your purpose but you can't zoom in too much since that will make it blurry.
Solution 7 - Html
You have to modify the viewBox
property to change the height and the width correctly with a svg. It is in the <svg>
tag of the svg.
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox
Solution 8 - Html
You can also use the transform: scale("")
option.