Как автоматически установить высоту контейнера для SVG c viewbox?

Если SVG не задавать жестких размеров, а задать соотношение сторон через viewBox, то SVG принимает ширину контейнера, а высота при этом определяется соотношением сторон. Даже если высота контейнера меньше высоты SVG. Как сделать так, чтобы высота контейнера (div#container) автоматически определялась высотой SVG. Попробовал height: auto;, но высота получается чуть больше, добавлял padding:0; box-sizing:content-box;, пробовал задать размеры SVG, но все равно снизу есть свободное пространство.

   
#container {
    width: 180px;
    height: auto;
    background: yellow;
    box-sizing: content-box;
    padding: 0px;
}
<div id="container">
    <svg fill="#000000" viewbox="2 2 20 20">
        <path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/>
    </svg>
</div>

Пока единственный способ (до которого я дошел) не повторять размеры иконки - использовать css-variables как для ширины, так и для высоты:

:root {
    --icon-size: 180px;
}

#container {
    width: var(--icon-size);
    height: var(--icon-size);
    background: yellow;
}
<div id="container">
    <svg fill="#000000" viewbox="2 2 20 20">
        <path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/>
    </svg>
</div>

Это вроде снимает лишние зависимости в коде (можно одной переменной редактировать сразу оба параметра), но ведь иконка может быть и не квадратной. Можно ли автоматически выставить высоту контейнера SVG с использованием viewBox?


Ответы (0 шт):