Почему изображения SVG не масштабируются с использованием свойства ширины CSS? ⇐ Html

[Anonymous]

HTML

Код: Выделить всё

[img]facebook.svg[/img]
[img]linkedin.svg[/img]
[img]instagram.svg[/img]

CSS с использованием 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;
}
}
}

Я не могу изменить размер SVG с помощью свойства CSS width. Вот что я получаю с помощью разных подходов (обратите внимание, как значки сворачиваются к середине главного героя div):

Код: Выделить всё

img { width: 2em; }

Код: Выделить всё

img { width: 3em; }

Код: Выделить всё

img { width: 4em; }

Однако, если я использую свойство CSS height:

Код: Выделить всё

img { height: 2em; }

Код: Выделить всё

img { height: 3em; }

Код: Выделить всё

img { height: 4em; }

Я получаю нужное поведение, но не уверен, что это правильный путь. Почему это происходит? Знаете ли вы более эффективные способы изменения размера SVG-изображений (особенно с помощью модуля Flexible Box)?

Подробнее здесь: https://stackoverflow.com/questions/390 ... h-property