Why does setting view width and height not suffice to enforce full browser window rendering of SVG element?

PROBLEM

I have the following html, in which I am attempting to draw an SVG viewport containing a line the size of my browser window:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" 
    style="outline: 5px solid red" width="100vw" height="100vh">
        <line x1="0" y1="75%" x2="250" y2="50" stroke="black"/>
    </svg>
   </body>
</html>

However, when I render the html the viewport appears to be larger than my browser window as I must scroll to see the full extent of my SVG viewport as shown below:

GOAL

My goal is to get the viewport to be exactly the size of my browser window as follows:

ATTEMPTING USE OF BORDER-BOX

The border-box redefines the width to include padding, border and margins. If the width and height is set to 100vw and 100vh under border-box behavior, that should include all padding, border and margins in the full browser window. However this does not seem to work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      svg {
        box-sizing: border-box;
        outline: 5px solid red;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
      <svg xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="75%" x2="250" y2="50" stroke="black" />
      </svg>
  </body>
</html>

ADDING BLOCK ELEMENT BEHAVIOR

According to one of the answers below svg's act as inline elements by default. That's fine, but then simply including display: block in the css should fix the issue, however this doesn't work:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            svg {
            box-sizing: border-box;
            border: 5px solid red;
            width: 100vw;
            height: 100vh;
            display: block;
            }
        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="75%" x2="250" y2="50" stroke="black" />
        </svg>
    </body>
</html>

OBJECTIONS TO SOME ANSWERS

1. I don't see why using % units is imperative here. % simply provides a relative length with respect to the parent element, which in this case is body. vw and vh provide lengths relative to the viewport window as explained in this link. In this particular application I care more about the viewport window rather than the body element itself...
2. I don't see why setting the margin of the body element to 0 is necessary here. The body element contains the svg block, but since the svg block is defined in terms of view heights and widths that should result in independent width and height behavior from the body element.