PNG vs SVG for Logos and Icons

#javascript #performance #svg #icons

In most of the applications, Icons will appear after a delay of 1 to 2 seconds. This is bad for the User Experience. There are multiple ways to improve the performance of icon rendering.
The streategies are

Using CDN
- Reduces the network latency in fetching the image. Still there can be a latency for first load or less frequently used images
Using Sprite and CSS
- All icons are loaded in one image so there will be a delay till the sprite image is loaded for the first time
SVG embedded into HTML
- SVG can be embedded into HTML. This eliminates the extra fetch for the image.
- In many cases the size of the SVG is smaller comparable to other image formats
- The latency issue is still persist if SVG is loaded as a separate image file

Here is the example I tried to load the Logos and icons in different formats. Embedded SVG is loaded as part of HTML while the other formats loads after a delay.