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 ;)
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.