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

html css svg sass

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; }

https://i.stack.imgur.com/7fIsb.png

img { width: 3em; }

https://i.stack.imgur.com/7iw0h.png

img { width: 4em; }

https://i.stack.imgur.com/Pbceu.png

However, if I use the CSS height property:

img { height: 2em; }

https://i.stack.imgur.com/n10yp.png

img { height: 3em; }

https://i.stack.imgur.com/B25nT.png

img { height: 4em; }

https://i.stack.imgur.com/xcH8V.png

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)?

Paul LeBeau

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.

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.

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.

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

Charith Jayasanka

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.

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

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

OZZIE

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;">

it's viewBox, not viewport

Paul LeBeau

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". 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.

Pawel

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.

Paul LeBeau

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

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

Viraj Agarwal

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.

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.

dylan

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

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US