Ok, I want to add a pencil icon here, the pencil should be #ccc, here is #ddd, there is rebeccapurple, and over here it should be the same color as the container color.

Please write a nodejs server that produces those tiny images, don't forgot to correctly set the caching headers...

Yeah, this is what I was referring to and is my main use for embedding SVGs.

For really simple ones, the size of the icon isn't a whole lot bigger than a CDN/object storage URL. And if you reuse it a couple times, it might even be a net bandwidth reduction.

Honestly, when people are making use of CSS to "reach into" the svg dynamically, or like your example, to color it dynamically, I'm not opposed to the strategy.

99% of the inline <svg> usages I see are people using js includes to inline an SVG which is itself stored in a .jsx file. This is just as lazy and wasteful as it would be if Styled Components were built not to generate classnames and a single stylesheet, but instead with all the rules simply inlined in style attributes on every element.

Wasting hundreds, well maybe a thousand of bytes in the process ! (I understand it's better to cache and things can go out of hand fast. But we're talking about small animations here.

I don't disagree at all. There's way bigger fish to fry when it comes to maximizing network efficiency in websites.

I'm just pointing out the rationale of OP since someone asked, and I've worked with people who've made this and similar arguments before. It's been awhile, though- the ones I'm thinking of would treat code golf as a best practice for CSS (only slightly exaggerating).

Of course, we both agree.

Believe me, a few kb on every icon on every pageview adds up to a lot of wasted bandwidth and not everyone is on a gigabit connection at all times, even fancy iPhones are on shitty connections a lot more than you think. Inside parking garages, on deprioritized LTE, etc.