How to manipulate SVG to make it responsive

Question

Hello, I did a background on Illustrator, I’m trying 3 steels that are not going:

1-Leave with 100VH height in desktop version
2 - Leaves 400px high in mobile version
3 - The list inside the Nav does not appear, only to the far side

I used VH in desktop version because and to take the entire screen height, and in mobile I used px, however none worked and UL do not appear.
Good afternoon.

*{
    margin: 0;
    padding: 0;
}

.back{ 
background-size: cover;
width: 100%;
height: 100vh;
}
nav {
    display: flex;
}
nav ul{
    display: flex;
    text-decoration: none;
    list-style: none;
    font-size: 30px;
}
nav ul li{
    margin-right: 40px;
}
nav ul li a{
    color: crimson;
    font-weight: bold;
    list-style: none;
    text-decoration: none;
}
@media (max-width: 700px){
.back{
    height: 400px;
    width: 100%;
}
}

   <nav>
    <img src="https://svgur.com/i/Nn8.svg" alt="" class="back">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">HOME</a></li>
        <li><a href="">HOME</a></li>
        <li><a href="">HOME</a></li>
        <li><a href="">HOME</a></li>
    </ul>
</nav>

Answer 1

Eai man, in case you can’t edit the SVG importing it as an image. You have to import the SVG code itself, taking your example from SVG, I downloaded it and opened one the VSC, took the xml from it and played in the code. With this you can edit the will your SVG. Example:

insira o código aqui<nav>        
<ul>
    <li><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1366px" height="768px" viewBox="0 0 1366 768" enable-background="new 0 0 1366 768" xml:space="preserve"><g id="Layer_1"></g><g id="Layer_2"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="381.1445" x2="1366" y2="381.1445"><stop offset="0" style="stop-color:#49C8F3"/><stop offset="0.0097" style="stop-color:#49C1EF"/><stop offset="0.0612" style="stop-color:#41ABE0"/><stop offset="0.1139" style="stop-color:#3C9AD4"/><stop offset="0.1674" style="stop-color:#398ECC"/><stop offset="0.2224" style="stop-color:#3887C8"/><stop offset="0.2809" style="stop-color:#3785C6"/><stop offset="0.6685" style="stop-color:#4F68B1"/><stop offset="0.8876" style="stop-color:#352E88"/><stop offset="1" style="stop-color:#3C55A5"/></linearGradient><path fill="url(#SVGID_1_)" d="M171.599,697.738c33.041,0,64.476,5.914,92.982,16.563c28.506-10.649,59.941-16.563,92.982-16.563c40.397,0,78.405,8.824,111.579,24.358c33.173-15.534,71.181-24.358,111.578-24.358c33.041,0,64.476,5.914,92.982,16.563c28.506-10.648,59.942-16.563,92.982-16.563c44.227,0,85.586,10.58,120.877,28.959c35.29-18.379,76.65-28.959,120.876-28.959c33.04,0,64.476,5.914,92.981,16.563c28.507-10.648,59.942-16.563,92.982-16.563c67.779,0,128.824,24.848,171.6,64.551c0-48.879,0-396.582,0-455.718c0-63.636,0-122.078-321-120.779S683,0,683,0H0v762.288C42.776,722.586,103.82,697.738,171.599,697.738z"/></g></svg></li>
    <li><a href="">HOME</a></li>
    <li><a href="">HOME</a></li>
    <li><a href="">HOME</a></li>
    <li><a href="">HOME</a></li>
    <li><a href="">HOME</a></li>
</ul>

<style>
  *{
      margin: 0;
      padding: 0;
  }
  .back{ 
  background-size: cover;
  width: 100%;
  height: 100vh;
  }
  nav {
      display: flex;
  }
  nav ul{
      display: flex;
      text-decoration: none;
      list-style: none;
      font-size: 30px;
  }
  nav ul li{
      margin-right: 40px;
  }
  nav ul li a{
      color: crimson;
      font-weight: bold;
      list-style: none;
      text-decoration: none;
  }
  svg {
    max-width: 50px;
    max-height: 50px;
  }
  @media (max-width: 700px){
  .back{
      height: 400px;
      width: 100%;
  }
  }
</style>