Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

98
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda