0

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.

Asif Zaidi
  • 123
  • 3
  • 20
  • Can you share a codepen/jsfiddle with one of these huge svgs? It depends on the structure of your files. As a starting point you can find some minifying techniques in this thread [Minimizing SVG file size](https://stackoverflow.com/questions/7068425/minimizing-svg-file-size#7068651). If you don't need to manipulate your svg (like styling, interactions etc.) you might also place the file in an `` tag: complex inlined svgs are often rendered significantly slower since thousands of nodes are added to the DOM. `` can at least mitigate a rendering slowdown. – herrstrietzel Jun 10 '22 at 16:04

0 Answers0