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

I'm building a portfolio website.

HTML Code

<div id = "hero">
   <div id = "social">
      <img src = "facebook.svg">
      <img src = "linkedin.svg">
      <img src = "instagram.svg">
    </div>
</div>

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

enter image description here

img { width: 3em; }

enter image description here

img { width: em; }

enter image description here

Please note how icons collapse toward the middle of the hero div.

Instead, if I use the CSS height property:

img { height: 2em; }

enter image description here

img { height: 3em; }

enter image description here

img { height: 4em; }

enter image description here

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

This question is related to html css svg sass

The answer is


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

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


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


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.


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.


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


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to svg

How to extract svg as file from web page How to display svg icons(.svg files) in UI using React Component? Why don’t my SVG images scale using the CSS "width" property? How to show SVG file on React Native? Easiest way to use SVG in Android? IE11 meta element Breaks SVG img src SVG changing the styles with CSS How to use SVG markers in Google Maps API v3 Embedding SVG into ReactJS How to change the color of an svg element?

Examples related to sass

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 How to fix ReferenceError: primordials is not defined in node Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` What is the difference between CSS and SCSS? Angular-cli from css to scss Why don’t my SVG images scale using the CSS "width" property? Angular CLI SASS options Error: Cannot find module 'gulp-sass' How to compile or convert sass / scss to css with node-sass (no Ruby)? Try reinstalling `node-sass` on node 0.12?