I am looking for a solution to load an SVG date from my Spring Boot backend and utilize it as an Angular template.
Currently, the request is structured like this:
getSVG (): Observable <any> {
return this.http.get(`${environment.apiUrl}/path/to/svg/svg.svg`, {headers: new HttpHeaders ({'Content-Type': 'image/svg+xml'})});
}
In my component, I call it in the following manner:
ngOnInit () {
this.myService.getSVG().subscribe((data) => {
console.log('data', data);
});
}
The request successfully retrieves the svg file in the network tab. However, the browser console displays the following error message:
backend returned code 200, body was: [object Object] main.js:1388:25
intercept http://localhost:8425/main.js:1388
error http://localhost:8425/vendor.js:223317
onLoad http://localhost:8425/vendor.js:41005
...
I aim to extract the content of the SVG and utilize it within my template, such as:
my.component.svg
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
...
</svg>