Fix responsive svg height

Question

I would like to make my curved svg draw have a fix maximum height, that mean when I resize the window to maximum it does not grow more than the half of page for example.

Actually when I resize the page height keep growing.

 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

I would save the svg file in a seperate container and link as follows:

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

Then apply css styling as follows

#svg{

max-height:10vw

}