Safe value must use [property]=binding after http interceptor and bypass security with DomSanitizer

<!--HTML CODE-->
<svg style="width: 100%; height: 100%;">
<image #cameraImage
       (load)="adjustImageSize()"
       (click)="clickOnImage($event)"
       [attr.href]="imageUrl | secureUrl | async"></image>
</svg>

// pipe code
@Pipe({
    name: 'secureUrl'
})
export class SecureUrlPipe implements PipeTransform {
    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }
    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, {responseType: 'blob'})
            .pipe(map((e) =>                 this.sanitizer.bypassSecurityTrustUrl(`url(${URL.createObjectURL(e)})`)));
    }
}

but the image is not getting displayed, when inspect console getting security error 400 bad request:-

SafeValue%20must%20use%20[property]=binding:%20url(blob:https://

although can see image response in Network. Please suggest where am doing wrong.

svg image should get displayed