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

Question

HTML

<div id="hero">
   <div id="social">
      <img src="facebook.svg" alt="Facebook">
      <img src="linkedin.svg" alt="LinkedIn">
      <img src="instagram.svg" alt="Instagram">
    </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)?

Diactinic

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.

Gerrard

Your answer seems to be the solution to my problem. So If I don't specify the width and the height of the SVG I think I can scale it without problems. – Diactinic

As of 2019 it looks like SVGs obey css width and height rules even if they have a viewbox and/or width and height inside them. Tested in Chrome and Firefox. – Jenifer

@Jenifer OP's problem was that they were only specifying the width in CSS. The height was coming from the SVG. – Gerrard

If there is any way to make it work with images you don't have control on (e.g. coming from a database), I'd be interested. – Divinity

@Divinity It depends. If you are displaying them using an <img>, then no, not really. But if you are displaying them by inlining the <svg>, then you can read the SVG's width and height and adapt accordingly. However, inlining `<svg> files that you don't control is unsafe. SVGs can have malicious JS in them. – Gerrard

Than you @PaulLeBeau for your reply. Yes I meant as an <img> tag since I get a URL from the database. I mean there are ways to load it in JS and add the <svg> code which would allow me to fiddle with the content itself. But like you said it's unsafe, and also generally SVG exported from a software have a lot of IDs that might clash with each other. – Divinity

Answer 2

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.

Selective

This solution worked well for me, as I didnt have control of the internals of the SVG file. Thanks for posting ;) – Whey

Good solution, but not the best as transformed SVG image parent element won't be aware of the increased sizing of the SVG element. – Subordinary

still leads to uglyness which is why iam here – Ojibwa

Problematic, because it can lead to unexpected UI issues, such as clipping, since the parent element is not in control of the icon size. – Stimulative

Answer 3

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;"> (doesn't need to be inline css but done from a class, <svg class="my-amazing-icon" ... > and adding the styles from a stylesheet.

---

Further info

Please note that viewBox="0 0 [w] [h]" could be "wrong" for some svgs, I mean the dubble zero part. The first two digits relate to where the icon places itself in the box you define, if it shall take full width or full height (or both - only works if it's a square icon ofc).

That said I haven't experienced this issue for svgs that lacked the viewBox attribute from the beginning.

Normandnormandy

it's viewBox, not viewport – Bombastic

Answer 4

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.

Karleen

My mistake was px value in the viewBox attribute – Me

Removing width and height attributes from the root node was the solution for me. – Holocene

Answer 5

1. If the svg file has a height and width already defined width="100" height="100" in the svg file then add this width="100" height="100" viewBox="0 0 100 100" while keeping the already defined width="100" height="100".
2. 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.

Jehad

life saving solution! – Vicariate

Answer 6

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

Masera

My guess on the downvote is that changing the viewbox doesn't actually scale the svg elements, it just changes the viewport size. – Somme

Answer 7

The svg viewBox needs to match the size at which the svg has been created at. This is so the coordinates will match the the viewBox. Then one can apply css scaling:

.parent {
    width: 2em;
    height: 2em;
}

.parent svg {
    width: 100%;
    height: 100%;
}

Stichomythia

Answer 8

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.

Appellee

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Ragman

Answer 9

You can also use the transform: scale("") option.

Bicollateral