How to scale my .svg to fill the entire viewport?

Question

My goal is to frame the entire page with the border defined in the svg image. I thought my css should do the trick, but the border doesn't scale to the browser window. What should my .css file look like? Should I modify the svg viewbox?

My Code:

html {
  background: url(img/border.svg) no-repeat fixed;
  background-size: cover;
  background-size: 100% 100%;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p>some text.</p>
  <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <path d="m0 0.1375h198.7v111.92h-198.7v-111.92m2.3812 1.8521v98.954c0 1.3229 1.0583 2.3812 2.6458 2.3812h191.29l0.26459-98.69c0-1.5875-1.0583-2.6458-2.9104-2.6458z" fill="#d9d9d9"/>
</svg>
</body>

</html>

Possible duplicate of [How to scale SVG image to fill browser window?](https://stackoverflow.com/questions/5643254/how-to-scale-svg-image-to-fill-browser-window) — nemanja, Jun 03 '18 at 16:34

Adam · Answer 1 · 2018-06-03T18:19:49.547

0

Your viewbox is 300 x 300 change that to 1920 x 1080 (your svg size) then that should do it and make it responsive.

check this code:

body {
  margin: 0;
  padding: 0;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p>some text.</p>
  <svg preserveAspectRatio="none" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
 .st0{fill:#D9D9D9;}
</style>
<path class="st0" d="M0-0.7h1920v1081.5H0V-0.7 M23,17.2v956.2c0,12.8,10.2,23,25.6,23H1897l2.6-953.6c0-15.3-10.2-25.6-28.1-25.6
 L23,17.2z"/>
</svg>
</body>

</html>

edited Jun 03 '18 at 18:19

answered Jun 03 '18 at 16:42

Adam

1,385
1
10
23

[ https://ibb.co/c9dMDJ ] Unfortunately, it doesn't work. By the way: it has to work on a 4:3 monitor, too. I don't want the aspect ratio to be preserved. The image can be stretched! – Marvin Noll Jun 03 '18 at 17:14
well you didn't say that in your post!! and why the vote down? at least say why rather than just down vote the answer. and here I updated my answer @MarvinNoll – Adam Jun 03 '18 at 18:19

score 0 · Answer 2 · answered Jun 03 '18 at 16:43

0

You should change your viewbox dimensions its very small to be screen responsive.

make it something like viewBox="0 0 1920 1080" and then apply css

answered Jun 03 '18 at 16:43

FlexOrNoFlex

52
7

score 0 · Answer 3 · answered Jun 03 '18 at 17:56

You have several things wrong:

Your SVG is missing a closing </svg> tag.
Your viewBox values are wrong. They are bigger than your actual SVG contents. It should be something like: viewBox="0 0 199 112"
To make the SVG ignore its aspect ratio and stretch to the parent container, you need to add preserveAspectRatio="none".

svg {
  /* Example dimensions to show that svg stretches correctly */
  width: 400px;
  height: 400px;
  background-color: linen;
  border: solid 1px blue;
}

<svg  viewBox="0 0 199 112" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="m0 0.1375h198.7v111.92h-198.7v-111.92m2.3812 1.8521v98.954c0 1.3229 1.0583 2.3812 2.6458 2.3812h191.29l0.26459-98.69c0-1.5875-1.0583-2.6458-2.9104-2.6458z" fill="#d9d9d9"/>
</svg>

How to scale my .svg to fill the entire viewport?

3 Answers3