Solution 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




Problem :

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  xlink="" width="100%" height="100%" viewBox="0 0 1280 657">
          <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" />
        <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)" />

    </div >

ReactDOM.render(<App />, document.getElementById("root"))
<script src=""></script>
<script src=""></script>
<div id="root"></div>


Comment posted by Yan

you can put this svg inside a div and set max height to this div to half of the page height and set svg height to 100%