Исправить отзывчивую высоту SVG

Question

Я бы хотел, чтобы мой изогнутый чертеж SVG имел фиксированную максимальную высоту, то есть, когда я изменяю размер окна до максимума, он не увеличивается, например, больше, чем на половину страницы.

На самом деле, когда я изменяю размер высота страницы продолжает расти.

const App = () => {
  return (
    <div className="App">
      <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1280 657">
        <defs>
          <linearGradient id="linear-gradient" x1="0.5" y1="0.519" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0" stop-color="#589ffe" />
            <stop offset="1" stop-color="#045dd0" />
          </linearGradient>
        </defs>
        <path id="Intersection_1" data-name="Intersection 1" d="M924.458,1202.608c-224.9-3.619-428.938-49.357-587.684-100v-556h1279v513.5c-215.071,100.41-432.159,139.232-634.553,142.5Z" transform="translate(-336.274 -546.108)" stroke="#707070" stroke-width="1" fill="url(#linear-gradient)" />
      </svg>

    </div >
  );
}

ReactDOM.render(<App />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

Я бы сохранил svg-файл в отдельном контейнере и со следующей ссылкой:

<div div src="images/image.svg" id="svg"> </div>

Затем примените стиль css следующим образом

#svg{

max-height:10vw

}