Pourquoi mes images SVG ne sont-elles pas mises à l'échelle en utilisant la propriété CSS "width"?

Je suis en train de construire un site portfolio.

Code HTML

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

Code CSS (à l'aide de 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;
        }
    }
}

Le problème est que je ne suis pas en mesure de redimensionner SVGs à l'aide de la CSS width de la propriété. Voici ce que j'en obtenir dans les différents cas:

img { width: 2em; }

img { width: 3em; }

img { width: em; }

Veuillez noter la façon dont les icônes effondrement vers le milieu de la hero div.

Au lieu de cela, si j'utilise le CSS height propriété:

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

Ce comportement est ce dont j'ai besoin, mais je ne suis pas sûr que ce soit la bonne façon. Pourquoi cela se produit? Savez-vous de meilleures façons de resizeing images SVG (en particulier en utilisant le flexbox modèle)?

source d'informationauteur Franco Scarpa