How do I scale an SVG to adjust with screen size? [duplicate]

Question

I'm very new to the coding world. I'm trying to scale my svg rect to adjust with changing screen size. I've done some searching on this issue and I see suggestions about setting height and width to 100% but when I do that, my svg either disappears to only half of it fits. Here is my code9; the buttons will stack vertically when the screen size goes smaller to a certain extent but the svg does not change at all. Please help! Thank you in advance.

.button {
  margin-left:750px;
  margin-top:-590px;
  padding: 0px 30px;
  position:fixed;
  index:0;
}

<svg id="Profile" width="1200" height="700"> 
  <rect x="150" y="150" rx="10" ry="10" width="1000" height="550"
  style="fill:white;stroke:#05aa12;stroke-width:3"/>
</svg>

<div class="button"> 
  <button id="One" type="button" class="btn btn-secondary">One</button>

  <button id="Two" type="button" class="btn btn-secondary">Two</button>

  <button id="Three" type="button" class="btn btn-secondary">Three</button>
</div>