Estoy creando un proyecto usando angular, en mi proyecto quiero mostrar svg dinámicamente en la página html angular, pero solo mostrará una cadena.

Aquí está el código:

 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>

La página se muestra justo debajo de la cadena

 <?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>

Intenté usar innerhtml, pero solo mostrará texto html, no color y otras cosas de svg