Как масштабировать inline svg?

Question

[TimLee]

Наглядный пример

В Inkscape, если задать ширину иконки, высота автоматически рассчитается. Можно ли в вебе используя inline svg сохранить aspect ratio? Как видно в примере вылезает высота по умолчанию 150px.

Answer 1

[teslor]

Высота по умолчанию вылезает, т.к. у вас не задана явно ни высота, ни viewBox.
Для большинства браузеров можно указать, например, <svg viewBox="0 0 1 1" class="box-icon">
В этом случае высота будет определяться автоматически и иконка будет вписываться в размеры в зависимости от ширины.
Но в IE высота по-прежнему будет 150px, там нужно явно задать высоту, или использовать хаки/другие способы.
Есть неплохая статья про адаптивный SVG (на английском).

Answer 2

[TimLee]

teslor,
Я тоже самое нарыл в другой статье.

У меня ViewBox задан в symbol, но к сожалению он не наследуется в svg элемент. Так как svg элемент создаётся динамически из миксина, я пока не понял как прописать в него атрибут ViewBox, вернее продублировать из symbol.

Кстати, конкретно в моём примере, если добавить такие правила height: 100%;display: flex; к .box-item, то высота станет нормальной.