svg 文件未显示在 img 控件上答案

【问题标题】：svg file not displaying on img controlsvg 文件未显示在 img 控件上
【发布时间】：2021-01-14 02:23:08
【问题描述】：

我试图在angular10 中的img 控件上显示SVG 文件，但它没有显示出来。如果我将文件更改为 jpg 它适用于相同的控件。我在nav 栏内有img 控件。

这是我的代码以及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>

【问题讨论】：

Plogo.svg 的标记是什么？
@RobertLongson - 我的svg 文件有很多文字。我只是添加了它的缩减样本。请检查更新的问题。
用另一个 SVG 文件试试看它是否有效。
@MoustafaZaki - 我尝试了不同的 svg，它工作正常。
@DearComrade 所以 plogo.svg 文件中的问题确保该文件是有效的 svg。

标签： html css angular twitter-bootstrap svg

【解决方案1】：

我的svg 文件不正确。我使用了另一个svg，它成功了。

【讨论】：