Как сделать масштабируемым svg?

Question

[Станислав Шабалин]

Не могу добиться растягивания svg элемента. Пробовал через классы - ни в какую
В body поместил код:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display:none">
			<symbol id="svg-logo" class="svg-logo" viewBox="0 0 670 360" fill="none">
				<path d="M 40,40 H 600 L 530,180 600,320 H 40 z"/>
				<text class="text label-1" fill="none" stroke="black" stroke-width="2px" style="font-size:40px;letter-spacing: 11px;" x="80" y="160">декор-центр</text>
				<text class="text label-1" fill="black" x="80" y="240">АРТ-СЕРВИС</text>
			</symbol>
		</svg>

В php код главной страницы разместил:

<div class="main-logo">
			<svg class="main-svg-logo"><use xlink:href="#svg-logo"></use></svg>'
		</div>

Ограничил элемент main-logo шириной 450px. Ширина svg должна быть вроде больше этого размера, а по факту около 300px всего. Как все же дотянуть его до предела и при уменьшении экрана масштабировать?

вот ссылка на сайт: https://artservice43.ru/

Answer 1

[Арсений Матыцин]

Max-width задает условие максимального размера, а не размер. Для стопроцентного размера ему необходимо задавать width:100%.

Самой svg-шке надо задавать размер в соотношении (прямо в теге), и ему уже, как обычной картинке указывать ширину 100%, а высоту «как пойдет».

Comments

[Станислав Шабалин]

для контейнера-обёртки у svg ширина 100% не работала до и после Ваших рекомендаций. Это связано с тем, что размер svg определяет размер контейнера и здесь дальнейшие советы помогли - за это спасибо. Но вот высота обертки никак не хочет подстроиться под высоту svg. Только абсолютное значение помогает это сделать, но для медиа - это не совсем правильный вариант.

[Арсений Матыцин]

Станислав Шабалин, я описал последовательность действий, которые сделал, чтобы добиться необходимого эффекта. В дебаггере на сайте.

Поэтому рекомендую углубиться в SVG, начать можно тут: css.yoksel.ru/svg-sizes