Why SVG in .svg file scales but when it's in .html file it won't?

I have generated a simple SVG file from Adobe Illustrator. When I open this .svg file in browser and I resize the browser window it is responsive to both height and width [desired behaviour].

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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 1400 778" enable-background="new 0 0 1400 778" xml:space="preserve">

    ----SVG CODE---

</svg>

But when same SVG is inlined inside HTML file it is only responsive to width of browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Overview</title>
    <style>

    </style>
</head>
<body>


<svg 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 1400 778" enable-background="new 0 0 1400 778" xml:space="preserve">

   ----SVG CODE---
</svg>



</body>
</html>

Can anyone tell me what I am missing here to make it responsive to height and width of the browser window?

Solution

You just need to set an explicit height and width of 100% on the html, body and svg elements so that they all fill the display.

html, body, svg {
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Overview</title>
    <style>

    </style>
</head>
<body>


<svg viewBox="0 0 1400 778" xml:space="preserve">

   <rect width="1400" height="778" fill="red"/>
</svg>



</body>
</html>