0

If you have a view box set too large, the page will scroll. Is there a way to make a view box fit the size of any given browser? For example, I am on a 1600 x 1900 browser right now with this view box:

<svg viewBox="-300 0 1920 995">

and my page scrolls. I made the webpage on a 1080p monitor originally and the page did not scroll.

Lin Du
  • 88,126
  • 95
  • 281
  • 483
Christian Caraballo
  • 73
  • 7

1 Answers1

1

You've kind of got things the wrong way round. The viewBox is what you use to make SVGs responsive. It tells the browser how to scale the contents of your SVG to fit the parent. The width and height attributes are what sets the size of the SVG.

What you need to do is restrict the size of the SVG to your window. Then the viewBox will let you size the content to fit.

For example:

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%
}
<svg width="100%" height="100%" viewBox="0 0 100 100">

  <circle cx="50" cy="50" r="50" fill="rebeccapurple"/>
  
</svg>

In this example. I've forced the <body> to match the window size. Then made the SVG fill that.

Make the example full screen. Then try enlarging and shrinking the window. Make it narrow or wide. The circle will automatically resize so it fits in the window.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181