Is there a way that I can make css take into account how much space a svg takes up

I have a svg and two divs and I am trying to make it so it the 2 divs and the svg take up the whole screen when you enter the site but with the svg is makes it bigger because the css is not accounting for the svg is there a way I can make css account for the space the svg takes up

I have tried to set the max height for the header-container

I have also tried to adjust the vh for the 2 divs but on a smaller or bigger screen they become different sizes and it does not work

* {
  margin: 0%;
  padding: 0%;
}
body {
  height: 100000px;
}
.header-container {
  width: 100%;
  background-color: #3C8DAD;
  max-height: 100vh;

}

.header-top {
  width: 100%;
  height: 50vh;
}
svg {
  vertical-align: top;
}
.header-bottom {
  width: 100%;
  height: 50vh;
  background-color: #F5A962;
}
.header-content {
  align-items: center;
  width: 45%;
  height: 300px;
  border: 2px red solid;
  position: absolute;
  left: 25%;
  top: 50%; 
}
.name {
  font-family: 'Titillium Web', sans-serif;
  font-size: 40px;
  color: white;
}
.job {
  font-family: 'Noto Serif', serif;
  font-size: 66px;
  font-weight: 800;
  color: white;
  margin-top: 3%;
  margin-left: 4%;
}

<div class="header-container">
  <div class="header-top">
      <div class="header-content">
          <div class="name">Andrew Saenger</div>
          <div class="job">Front-End Web Developer</div>
      </div>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#F5A962" fill-opacity="1" d="M0,160L48,160C96,160,192,160,288,138.7C384,117,480,75,576,85.3C672,96,768,160,864,160C960,160,1056,96,1152,80C1248,64,1344,96,1392,112L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  </svg>
  <div class="header-bottom"></div>
</div>