How I Sped Up SVG Icon Loading on the Dashboard

The dashboard icons for the SaaS I run are all in SVG format, except for a few. Previously, these were all loaded one by one, like loading home.svg, then settings.svg, and so on.

Doing it this way took longer to load everything compared to loading just one file, and there were issues like icons still not being loaded even after the dashboard fully appeared.

1. SVG Sprite Method (Failed)

Here, I first tried the sprite method, which is the most widely used way to combine SVGs into one.

Simple white SVG files all worked fine, but I found that complex SVG icons, like browser icons, didn't apply properly and had issues like breaking into black or losing their colors.

While looking for a solution, I saw Claude's answer saying that since this method combines multiple SVGs into one, complex icons naturally break and it can't be fixed, so I moved on to the next method.

2. Putting SVGs into CSS (Success)

I created files called icons.css and browsers.css, and inserted the SVGs using the method of putting url() in the background-image inside them.

This is possible because CSS's url() can also take inline data starting with data: in addition to regular file paths.

The method to convert an existing single SVG file into a format that can be put into CSS like this is also simple; you just need to run the code below.

node -e “const fs=require(’fs’); const s=fs.readFileSync(’./filename.svg’,’utf8’); console.log(’data:image/svg+xml,’ + encodeURIComponent(s));”

Running this script in the terminal converts the SVG file into a data:image/svg+xml format, and you just put this into CSS like background-image: url(”paste here”).

3. Performance Improvement

When I applied method 2, instead of fetching more than 10 SVG files when the dashboard loaded, it now only needs to fetch one CSS file, so the speed became much faster, and the issue of them displaying sequentially also disappeared.

I don't have the load speed saved from before the application, so I can't make an exact comparison, but it's certain that there is an excellent performance improvement, feeling like it's more than twice as fast.