Как изменить размеры svg в соответствии с размерами вложенного контента?

Question

[photosho]

При размещении svg "symbol" при помощи "use" ширина самого svg-контейнера имеет какое-то фиксирванное значение, несмотря на явно заданную ширину вложенного элемента. Можно как-то это решить?

https://codepen.io/photosho/pen/ExRajEV

Answer 1

[xdevelx]

css.yoksel.ru/svg-sizes

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется

Отсюда вывод: если нужны размеры, указывайте их. Да, так банально

<svg width="18" height="19"><use xlink:href="#exit"></use></svg>

https://codepen.io/xdevelx/pen/YzvPwYz

Comments

[photosho]

Жаль, если нет другого способа. У вложенных элементов могут быть разные размеры.

[xdevelx]

photosho, То есть вы не знаете размеры иконки заранее?

[xdevelx]

В любом случае width и height задаются в html или css. В css хуже — пока стили не прогрузятся svg будет другого размера.

Answer 2

[Анастасия Кузнецова]

Поставь width 100% & height auto в CSS

Answer 3

[Максим]

В вашем svg отсутствует обязательный аттрибут viewBox почитайте для,чего он нужен и если будете его использовать то данная проблема пройдёт