Accessing an external SVG File and adding an angular material Tooltip to a specific SVG element inside the whole SVG from a typescript file: Angular

Specific parts of the angular code

|SVG File|

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="950" height="450" viewBox="0 0 1280.000000 1119.000000"
     preserveAspectRatio="xMidYMid meet">
<circle r="50px" cx="650" cy="968" fill="red" stroke="black" visibility="visible"/>
  <rect x="650.117" y="968.413" width="1000" height="800" fill="green" visibility="visible"/>
</svg>

|HTML File|

<object #svgmyimage>
</object>

|Type Script File|

 @ViewChild('svgmyimage') imageSvg?:ElementRef;

 ngOnInit() {
    this.reset();
    this.httpClient
          .get(`assets/svgimages/image1.svg`, { responseType: 'text' })
          .subscribe((value: string) => {
            this.svgStr = value;
//             console.log(this.svgStr);
            this.drawImage();
          });

  }

  drawImage() {
    if (this.imageSvg && this.svgStr) {

      this.imageSvg.nativeElement.innerHTML = this.svgStr;

      if(this.imageSvg.nativeElement.children[0])
      {
          this.imageSvg.nativeElement.children[0]setAttribute('visibility', 'visible');
          this.imageSvg.nativeElement.children[1]setAttribute('fill', 'yellow');
      }

    }
  }

Like this. I am able to access and change the attributes to add a Angular Material Tooltip. I could use tooltip property in the HTML file itself and it works provided the whole svg code is inside my HTML rather than linked as an external file. Could someone help me on this.
As

this.imageSvg.nativeElement.children[0]setAttribute('matTooltip', 'information');

makes no sense as Tooltip is not a property of the SVG. So, how to add tooltip to an externally linked svg file in html from the typescript fil. I wanna add tooltip only to the circle in the svg!