I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar.
Here is my code snippet along with some 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;
}
This is how the Plogo.svg file appears:
<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>