I am creating project using angular, in my project i want to display dynamically svg on angular html page, but it will show only string.

Here is code:

const json = JSON.stringify(this.canvas);
 this.allCanvas.push(this.canvas.toSVG())

<div *ngFor="let canvas of allCanvas; let i = index" class="preview">
 {{canvas}}
 <!-- <img src="{{canvas}}"> -->
  
  </div>

Page is showing just below string

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1200" height="500" viewBox="0 0 1200 500" xml:space="preserve"> <desc>Created with Fabric.js 5.2.1</desc> <defs> </defs> <g transform="matrix(0.5 0 0 0.5 58.04 21.55)" style="" > <text xml:space="preserve" font-family="arial" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-95.58" y="12.57" >This is text</tspan></text> </g> </svg>

I tried using innerhtml, but it will just show html text not color and other things of svg