title: Img src doesn't render SVG in Angular
body: <p>I have SVG file coming from backend and when I try to display it in frontend angular(v11) app it doesn't render and looks broken</p>
  <p>here is my code..</p>
  <pre><code> &lt;div fxLayout=&quot;column&quot; *ngFor=&quot;let svgFile of activePageDataChunk&quot;&gt;
  &lt;img src=&quot;data:image/svg+xml,svgFile&quot;&gt;
  </code></pre>
  <p>this is how it looks like</p>
  <p><a href="https://i.stack.imgur.com/Xb1KL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xb1KL.png" alt="file.svg" /></a></p>
  <p>this is content inside svg</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;420mm&quot; height=&quot;297mm&quot;&gt;
    &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; id=&quot;paperBorder&quot; fill=&quot;#FFF&quot;/&gt;
    &lt;svg id=&quot;margins&quot; x=&quot;5mm&quot; y=&quot;5mm&quot;&gt;
      &lt;svg x=&quot;38.200050592422485mm&quot; overflow=&quot;visible&quot;&gt;
        &lt;svg class=&quot;level_marker&quot; x=&quot;0mm&quot; y=&quot;28.509538173675537mm&quot; overflow=&quot;visible&quot;&gt;
          &lt;text class=&quot;level_marker_text&quot; font-size=&quot;12&quot; y=&quot;-6&quot; x=&quot;6mm&quot; text-anchor=&quot;start&quot;&gt;+0.000&lt;/text&gt;
          &lt;line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;20mm&quot; y2=&quot;0&quot; fill=&quot;none&quot; stroke=&quot;#231f20&quot; stroke-miterlimit=&quot;10&quot;/&gt;
          &lt;line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;2.5mm&quot; y2=&quot;2.5mm&quot; fill=&quot;none&quot; stroke=&quot;#231f20&quot; stroke-miterlimit=&quot;10&quot;/&gt;
          &lt;line x1=&quot;2.5mm&quot; y1=&quot;2.5mm&quot; x2=&quot;5mm&quot; y2=&quot;0mm&quot; fill=&quot;none&quot; stroke=&quot;#231f20&quot; stroke-miterlimit=&quot;10&quot;/&gt;
        &lt;/svg&gt;
        &lt;svg class=&quot;level_marker&quot; x=&quot;0mm&quot; y=&quot;-2.490461826324463mm&quot; overflow=&quot;visible&quot;&gt;
          &lt;text class=&quot;level_marker_text&quot; font-size=&quot;12&quot; y=&quot;-6&quot; x=&quot;6mm&quot; text-anchor=&quot;start&quot;&gt;+3.100&lt;/text&gt;
          &lt;line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;20mm&quot; y2=&quot;0&quot; fill=&quot;none&quot; stroke=&quot;#231f20&quot; stroke-miterlimit=&quot;10&quot;/&gt;
          &lt;line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;2.5mm&quot; y2=&quot;2.5mm&quot; fill=&quot;none&quot; stroke=&quot;#231f20&quot; stroke-miterlimit=&quot;10&quot;/&gt;
          &lt;line x1=&quot;2.5mm&quot; y1=&quot;2.5mm&quot; x2=&quot;5mm&quot; y2=&quot;0mm&quot; fill=&quot;none&quot; stroke=&quot;#231f20&quot; stroke-miterlimit=&quot;10&quot;/&gt;
        &lt;/svg&gt;
      &lt;/svg&gt;
    &lt;/svg&gt;
    &lt;svg x=&quot;0mm&quot; y=&quot;195mm&quot; width=&quot;83mm&quot; height=&quot;22mm&quot;&gt;
      &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; stroke=&quot;#666&quot;/&gt;
      &lt;text x=&quot;1mm&quot; y=&quot;2.5mm&quot; font-size=&quot;2mm&quot; font-family=&quot;DINPro-Light, DIN Pro&quot; font-weight=&quot;300&quot; style=&quot;isolation:isolate&quot;/&gt;
      &lt;text x=&quot;1mm&quot; y=&quot;7.5mm&quot; font-size=&quot;4.5mm&quot; font-family=&quot;DINPro, DIN Pro&quot; style=&quot;isolation:isolate&quot;/&gt;
    &lt;/svg&gt;
    &lt;svg x=&quot;0mm&quot; y=&quot;247mm&quot; width=&quot;27.5mm&quot; height=&quot;10mm&quot;&gt;
      &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; stroke=&quot;#666&quot;/&gt;
      &lt;text x=&quot;1mm&quot; y=&quot;2.5mm&quot; font-size=&quot;2mm&quot; font-family=&quot;DINPro-Light, DIN Pro&quot; font-weight=&quot;300&quot; style=&quot;isolation:isolate&quot;&gt;DATE&lt;/text&gt;
      &lt;text x=&quot;1mm&quot; y=&quot;7.5mm&quot; font-size=&quot;4.5mm&quot; font-family=&quot;DINPro, DIN Pro&quot; style=&quot;isolation:isolate&quot;&gt;2.6.2022&lt;/text&gt;
    &lt;/svg&gt;
    &lt;svg x=&quot;0mm&quot; y=&quot;257mm&quot; width=&quot;83mm&quot; height=&quot;10mm&quot;&gt;
      &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; stroke=&quot;#666&quot;/&gt;
      &lt;text x=&quot;1mm&quot; y=&quot;2.5mm&quot; font-size=&quot;2mm&quot; font-family=&quot;DINPro-Light, DIN Pro&quot; font-weight=&quot;300&quot; style=&quot;isolation:isolate&quot;&gt;SCALE&lt;/text&gt;
      &lt;text x=&quot;50%&quot; y=&quot;50%&quot; alignment-baseline=&quot;central&quot; text-anchor=&quot;middle&quot; font-size=&quot;4.5mm&quot; font-family=&quot;DINPro, DIN Pro&quot; style=&quot;isolation:isolate&quot;&gt;1:100&lt;/text&gt;
    &lt;/svg&gt;
    &lt;svg x=&quot;0mm&quot; y=&quot;277mm&quot; width=&quot;83mm&quot; height=&quot;10mm&quot;&gt;
      &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; stroke=&quot;#666&quot;/&gt;
      &lt;text x=&quot;1mm&quot; y=&quot;2.5mm&quot; font-size=&quot;2mm&quot; font-family=&quot;DINPro-Light, DIN Pro&quot; font-weight=&quot;300&quot; style=&quot;isolation:isolate&quot;&gt;DRAWN BY&lt;/text&gt;
      &lt;text x=&quot;1mm&quot; y=&quot;7.5mm&quot; font-size=&quot;4.5mm&quot; font-family=&quot;DINPro, DIN Pro&quot; style=&quot;isolation:isolate&quot;/&gt;
    &lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>