How to make svg scalable?

Question

css

I can't get my svg element to stretch. I tried through classes - in none
In the body I placed the code:

<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>

In php, the code of the main page posted:

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

Restricted the main-logo element to a width of 450px. The width of the svg should seem to be more than this size, but in fact it is about 300px in total. How to still reach it to the limit and scale it when the screen is reduced?

here is the link to the site: https://artservice43.ru/

Answer 1

Max-width specifies the maximum size condition, not the size. For 100% size it needs to set width:100%.
The svg-shka itself needs to be set the size in the ratio (right in the tag), and it is already, like a regular picture, to specify the width of 100%, and the height “as it goes”.