Как правильно выставить 100% ширину для svg символа?

Question

[Валера Удав]

Ссылка на CodePen с примером

В общем суть такая, есть некоторое svg подключаемое символом. Нужно растянуть его на 100% ширины экрана с сохранением пропорций. Проблема в том что почемуто высота, если не указывать ее в явном виде принимает значение в 150px в связи с этим возникает проблема отступов сверху и снизу на маленькой ширине и слева и справа на большой ширине.

Проблема решается если вставить прям непосредственно код свгшки в тело страницы (пример), но все таки хотелось бы разобраться откуда появляются эти 150px.

Проблема повторяется с любым svg изображением.

Answer 1

[Петр]

Вот ответ

Comments

[Валера Удав]

Уже просматривал эту статью) Толи моего английского не хватает чтобы в полной мере понять контекст толи еще что то. Не мог бы ты на моем примере показать как правильно это решить?

[Петр]

Валера Удав: Так работает jsfiddle.net/fu76qrx8

Answer 2

[Antony Bark]

откуда появляются эти 150px

это стандарт браузера описание вопроса
решение на тостере