title: Why don’t SVG images scale using the CSS “width” property?
body: <h1>HTML</h1>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;hero&quot;&gt;
     &lt;div id=&quot;social&quot;&gt;
        &lt;img src=&quot;facebook.svg&quot; alt=&quot;Facebook&quot;&gt;
        &lt;img src=&quot;linkedin.svg&quot; alt=&quot;LinkedIn&quot;&gt;
        &lt;img src=&quot;instagram.svg&quot; alt=&quot;Instagram&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h1>CSS using SASS</h1>
  
  <pre class="lang-css prettyprint-override"><code>#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;
          }
      }
  }
  </code></pre>
  <p>I’m not able to resize SVGs using the CSS <code>width</code> property. Here is what I obtain with different approaches (note how icons collapse toward the middle of the <code>hero</code> <code>div</code>):</p>
  <p><code>img { width: 2em; }</code></p>
  <p><a href="https://i.stack.imgur.com/7fIsb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7fIsb.png" alt="enter image description here" /></a></p>
  <p><code>img { width: 3em; }</code></p>
  <p><a href="https://i.stack.imgur.com/7iw0h.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7iw0h.png" alt="enter image description here" /></a></p>
  <p><code>img { width: 4em; }</code></p>
  <p><a href="https://i.stack.imgur.com/Pbceu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Pbceu.png" alt="enter image description here" /></a></p>
  <p>However, if I use the CSS <code>height</code> property:</p>
  <p><code>img { height: 2em; }</code></p>
  <p><a href="https://i.stack.imgur.com/n10yp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/n10yp.png" alt="enter image description here" /></a></p>
  <p><code>img { height: 3em; }</code></p>
  <p><a href="https://i.stack.imgur.com/B25nT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/B25nT.png" alt="enter image description here" /></a></p>
  <p><code>img { height: 4em; }</code></p>
  <p><a href="https://i.stack.imgur.com/xcH8V.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xcH8V.png" alt="enter image description here" /></a></p>
  <p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" rel="noreferrer">Flexible Box Module</a>)?</p>