Angular: how to load a svg file from a backend and use its content as a template?

I need a way to load an SVG date from a Spring Boot backend and use its content as an Angular template.

My request currently looks 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 it is called like this:

   ngOnInit () {
     this.myService.getSVG().subscribe((data) => {
       console.log('data', data);
     });
   }

The request goes through so that I get the svg file in the network tab. But in the browser console I get 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
    invokeTask http://localhost:8425/polyfills.js:663
    onInvokeTask http://localhost:8425/vendor.js:76954
    invokeTask http://localhost:8425/polyfills.js:662
    runTask http://localhost:8425/polyfills.js:431
    invokeTask http://localhost:8425/polyfills.js:744
    invokeTask http://localhost:8425/polyfills.js:1885
    globalZoneAwareCallback http://localhost:8425/polyfills.js:1922


ERROR OK                                                       vendor.js:47101:33
    defaultErrorLogger http://localhost:8425/vendor.js:47101
    handleError http://localhost:8425/vendor.js:47153
    next http://localhost:8425/vendor.js:77725
    schedulerFn http://localhost:8425/vendor.js:73301
    __tryOrUnsub http://localhost:8425/vendor.js:219977
    next http://localhost:8425/vendor.js:219916
    _next http://localhost:8425/vendor.js:219866
    next http://localhost:8425/vendor.js:219843
    next http://localhost:8425/vendor.js:219629
    emit http://localhost:8425/vendor.js:73263
    onHandleError http://localhost:8425/vendor.js:77012
    invoke http://localhost:8425/polyfills.js:628
    run http://localhost:8425/polyfills.js:387
    runOutsideAngular http://localhost:8425/vendor.js:76893
    onHandleError http://localhost:8425/vendor.js:77009
    handleError http://localhost:8425/polyfills.js:632
    runTask http://localhost:8425/polyfills.js:434
    invokeTask http://localhost:8425/polyfills.js:744
    invoke http://localhost:8425/polyfills.js:733
    timer http://localhost:8425/polyfills.js:2816

I would like to extract the content of the SVG and use it in my template, like:

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>