Currently, in my angular 10 application, I am utilizing a library called svg.js to generate an SVG within the client. However, the specific library I am using is irrelevant for the question at hand.
let svg = SVG().size(this.widthpx, this.heightpx).svg(); // This function returns an SVG,
// but I treat it as any type in typescript due to lack of better knowledge
After creating this SVG, my objective is to display it, preferably as the background image of a div. Nevertheless, I am open to setting it as the source of an <img> tag if necessary.
How can I achieve this? I have tried implementing the method described here:Angular dynamic background images
<div [style.background]="svg"></div>
I also experimented with alternative approaches proposed here: Change img [src] dynamically
<img id='other' [src]="svg">
<img id='other' src={{svg}}>
Considering my limited experience with both typescript and angular, I suspect there may be a logical mistake on my end. Perhaps simply setting an svg-like variable as background/src is not feasible, and further processing is required? Creating a URI for it, perhaps? Or casting it to a specific type?
I am aware that the svgjs library offers an attachTo() method on their object. However, since this occurs outside of angular and limits my capabilities down the line, I prefer to handle things autonomously.
To elaborate on what isn't functioning correctly, employing
src={{svg}} or [src]="svg"<img _ngcontent-dgo-c96="" id="other" src="unsafe:<svg xmlns="http://www.w3.org/2000/svg"(...shortened...) </svg>">
The approach using [style.background] results in an empty svg element being displayed at an incorrect position.