Tengo la aplicación Angular 13 en ejecución y estoy tratando de mostrar 2 svg en una página. Para mostrar el svg, se usa la biblioteca ng-inline-svg

Como cada tamaño de svg es de alrededor de 1,5 mb, a continuación se muestran los cambios a los que me enfrento:

• interacción de los botones de radio, el cuadro de entrada es demasiado lento
• la carga de svg tarda 4-5 segundos

svg-display.component.html

 <div [id] ="svgImageName" class="svgContainer" *ngIf="svgImagePath"> <div class="displaySvg" [inlineSVG]="svgImagePath" [cacheSVG]=false [onSVGLoaded]="onSvgLoaded.bind(this)" [removeSVGAttributes]="['xmlns']" [forceEvalStyles]="true"> </div> </div>

svg-display.component.ts

 @Component({ selector: 'app-svg-display', templateUrl: './svg-display.component.html', styleUrls: ['./svg-display.component.scss'] }) export class SvgDisplayComponent implements OnInit{ @Input() svgImageName: string; @Output() svgLoaded = new EventEmitter<SVGElement>(); svgImagePath: string; svgElement: SVGElement; ngOnInit() { this.svgImagePath = UriPathHelper.getImagePath(`svgs/${this.svgImageName}`); } onSvgLoaded(svg: SVGElement): SVGElement { this.svgLoaded.emit(this.svgElement); return this.svgElement; } }

inicio.componente.html

 <p>Please select your favorite Web language:</p> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> <app-svg-display [svgImageName]='svgName'></app-svg-display>

Traté de comprimir el svg en línea, pero está agrupando la ruta que no quiero. Sugiera cómo aumentar la velocidad de interacción del botón de radio/cuadro de entrada y aumentar el rendimiento de la página comprimiendo svg.