Файл svg не отображается в элементе управления img

Я пытаюсь показать файл SVG на элементе управления img в angular10, но он не отображается. Если я изменю файл на jpg, он будет работать с тем же элементом управления. У меня есть контроль img внутри панели nav.

Это мой код вместе с css

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a style="padding-top: 0px;" class="navbar-brand" href="#"><img  class="img-responsive" width="90px" height="35px"  src="/assets/Plogo.svg"> </a>
  <button
    class="navbar-toggler"
    type="button"
    aria-label="Toggle navigation">
    
  <span class="navbar-toggler-icon"></span>
  </button>

  <div  class="collapse navbar-collapse" id="navbarCollapse">
  </div>
</nav>

.nav-link:hover {
  transition: all 0.4s;
}

.nav-link-collapse:after {
  float: right;
  content: '\f067';
  font-family: 'FontAwesome';
}

.nav-link-show:after {
  float: right;
  content: '\f068';
  font-family: 'FontAwesome';
}

.nav-item ul.nav-second-level {
  padding-left: 0;
}

.nav-item ul.nav-second-level > .nav-item {
  padding-left: 20px;
}

.navbar-expand-lg .sidenav {
  flex-direction: column;
}

Как выглядит файл Plogo.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="439" viewBox="0 0 900 439">
  <image width="900" height="439" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAG3CAYAAADsP5sRAAAJwElEQVR4nO3XQQEAIACEsNP5ErkJggg=="/>
</svg>