How can I add equal top and bottom margin/padding to an SVG in HTML sized dynamically with the screen?

I currently have an SVG in HTML which is dynamically sized so that its height takes up the whole screen without scrollbars. I'm attempting to shrink it slightly and add an equal amount of empty space between the SVG and the top and bottom screen edges without introducing scrollbars; however, all of my attempts so far are introducing a scrollbar, unequal margins/padding at the top and bottom, and/or rightward shifts of the SVG (possibly). I'm also unclear as to whether margin or padding is semantically more appropriate (or else something else entirely)—I plan to later put an animated SVG wave shape into the currently-present bottle shape to make it look like there is sloshing water in the bottle.

My current code that places the SVG without spacing:

<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0; box-sizing: border-box;}
.container {justify-items: center;}
svg {display: block; height: 100dvh;}
</style>
</head>
<body>

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>

</body>
</html>

Setting margin to 5dvh and the height of the SVG CSS block to 90dvh shifts the image down, introducing a scrollbar, and seems to have unequal padding/margin at the top and bottom:

<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 5dvh; box-sizing: border-box;}
.container {justify-items: center;}
svg {display: block; height: 90dvh;}
</style>
</head>
<body>

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>

</body>
</html>

Setting the margin back to 0 and padding to 5dvh and height to 90dvh in the SVG CSS block does not result in a scrollbar but results in unequal padding at the top and bottom:

<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0; box-sizing: border-box;}
.container {justify-items: center;}
svg {display: block; height: 90dvh; padding: 5dvh;}
</style>
</head>
<body>

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>

</body>
</html>

I've also tried making padding 10px instead of 5dvh in the above example, but that doesn't result in equal padding at the top and bottom either.

Solution

Set height on the container, and padding on the SVG:

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  height: 100dvh;
}

svg {
  display: block;
  padding-block: 10%;
}

<div class="container">
  <svg height="100%" width="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
  <path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
  </svg>
</div>