I've been coding for over 20 years now! (WOAH, do I feel old)
I've touched just about every resource imaginable under the Sun (too bad they were bought out by Oracle)
I inlined the SVGs that needed to change colors with the light/dark mode, so I could use currentcolor for the fill and stroke. The ones that had a fixed background color (the SVGs in tabs and menus) keep their color all the time are "static", so I added with <img/> to cache them. Although probably it can be done in an easier/more efficient way... I'm open to suggestions and improvements.
I've been coding for over 20 years now! (WOAH, do I feel old)
I've touched just about every resource imaginable under the Sun (too bad they were bought out by Oracle)
having them in an img element means they still need fetched at least once no matter what. svg files are tiny text files, usually ~1-4KB in size, so the full round trip of fetching something so small isn't usually worth it, even if only done once and cached. from personal experience, I've found that just embedding them every time, even though that means they transfer over the wire every page load, is still more efficient over all, since there is zero interaction needed at that point to either test the caching system or make a full fetch from the remote server.
Oh, and if you wanted to do fancy CSS stuff in the future, it would already be ready for it ;)
I just wanted to say that I always highly appreciate anyone who uses SVG for their graphics where possible! :)
One question: some are embedded, some are linked. Is there a reason for this, vs having them all embedded so CSS could apply to them?
Thanks!
I inlined the SVGs that needed to change colors with the light/dark mode, so I could use
currentcolor
for thefill
andstroke
. The ones that had a fixed background color (the SVGs in tabs and menus) keep their color all the time are "static", so I added with<img/>
to cache them. Although probably it can be done in an easier/more efficient way... I'm open to suggestions and improvements.having them in an img element means they still need fetched at least once no matter what. svg files are tiny text files, usually ~1-4KB in size, so the full round trip of fetching something so small isn't usually worth it, even if only done once and cached. from personal experience, I've found that just embedding them every time, even though that means they transfer over the wire every page load, is still more efficient over all, since there is zero interaction needed at that point to either test the caching system or make a full fetch from the remote server.
Oh, and if you wanted to do fancy CSS stuff in the future, it would already be ready for it ;)
I'll inline them. I think it's only 8 in total, so it should be easy. Thanks for the suggestion and the explanation!
It gets confusing with all the changes in that, HTTP, HTTP2, caching, inlining... It's tough to keep up sometimes.