Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

99
Vistas
How to optimize page performance with huge svg size

I have running Angular 13 application and I am trying to display 2 svg in a page. To display the svg, ng-inline-svg library is used

As each svg size is around 1.5 mb, below are the changes I am facing:

  • interaction of radio buttons, input box are too slow
  • svg loading takes 4-5 seconds

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;
        }
    }

home.component.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>

I tried to compress the svg online, but its grouping the path which I don't want. Please suggest how to increase the radio button/input box interaction speed and increase the page performance by compressing svg.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda