How to scale inline svg?

Question

HTML

An illustrative example
In Inkscape, if you set the width of an icon, the height will automatically be calculated. Is it possible to keep the aspect ratio on the web using inline svg? As you can see in the example, the default height is 150px.

Answer 1

The default height gets out, because. you don't explicitly set either height or viewBox.
For most browsers, you can specify, for example, <svg viewBox="0 0 1 1" class="box-icon">
In this case, the height will be determined automatically and the icon will fit into the dimensions depending on the width.
But in IE, the height will still be 150px, you need to explicitly set the height there, or use hacks / other ways.
There is a good article about responsive SVG (in English).

Answer 2

teslor ,
I dug up the same thing in another article .
I have a ViewBox set to symbol, but unfortunately it is not inherited in the svg element. Since the svg element is created dynamically from the mixin, I have not yet figured out how to set the ViewBox attribute in it, or rather duplicate it from symbol.
By the way, specifically in my example, if you add such rules height: 100%;display: flex;to .box-item, then the height will become normal.