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

Asked Jan 24 '21 at 21:03

Active Jan 24 '21 at 21:06

Viewed 107 times

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>

edited Jan 24 '21 at 21:06

Dominik

6,078
8
37
61

asked Jan 24 '21 at 21:03

user15072848

Don't use `width/height` use a proper `viewbox` – Paulie_D Jan 24 '21 at 21:06
1

Use a viewBox attribute and no width and height for example ` – enxaneta Jan 24 '21 at 21:07
Remove the `width` and `height` attributes from your SVG and add a `viewbox`. Then you can manage the size with CSS better. – Dominik Jan 24 '21 at 21:07

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

0 Answers0