TYPO3 Core

Example with flags (encoded with SASS/Compass):

.t3-icon-flags-de {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDUgMyI+PGRlc2M+RmxhZyBvZiBHZXJtYW55PC9kZXNjPjxwYXRoIGQ9Ik0wIDBoNXYzSDB6Ii8+PHBhdGggZmlsbD0iI0QwMCIgZD0iTTAgMWg1djJIMHoiLz48cGF0aCBmaWxsPSIjRkZDRTAwIiBkPSJNMCAyaDV2MUgweiIvPjwvc3ZnPg==') no-repeat 1.3rem 0.25rem;
}
.t3-icon-flags-gb {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzMCIgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIj48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGQ9Ik0zMCAxNWgzMHYxNXp2MTVIMHpIMFYwelYwaDMweiIvPjwvY2xpcFBhdGg+PHBhdGggZD0iTTAgMHYzMGg2MFYweiIgZmlsbD0iIzAwMjQ3ZCIvPjxwYXRoIGQ9Ik0wIDBsNjAgMzBtMC0zMEwwIDMwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNiIvPjxwYXRoIGQ9Ik0wIDBsNjAgMzBtMC0zMEwwIDMwIiBjbGlwLXBhdGg9InVybCgjYSkiIHN0cm9rZT0iI2NmMTQyYiIgc3Ryb2tlLXdpZHRoPSI0Ii8+PHBhdGggZD0iTTMwIDB2MzBNMCAxNWg2MCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEwIi8+PHBhdGggZD0iTTMwIDB2MzBNMCAxNWg2MCIgc3Ryb2tlPSIjY2YxNDJiIiBzdHJva2Utd2lkdGg9IjYiLz48L3N2Zz4=') no-repeat 1.3rem 0.25rem;
}

This issue sounds to be pretty much the opposite of 69706. But 69706 allows to integrate SVGs into DOM for manipulation, presumably. HTML-inline SVG is at the cost of mitigating any sort of caching, plus blowing up the HTML code and contradicting CSS paradigm at its best. There's a use case for 69706, of course. So this feature should remain untouched.

However, DOM manipulation is not needed for static icons and flags. They're just background images. And 69706 is not applied for icons anyways in 7.6, as shown in the code example above (69706 is optional, not the default setting).

This issue also does not worsen the number of round trips:

---> HTML ---> CSS (with SVG embedded as suggested by this issue)

versus current state (7.6):

---> HTML ---> CSS
---> HTML --=> SVG

versus using url() syntax in css for a request:

---> HTML ---> CSS --=> SVG

versus HTML-inline SVG (as suggested by 69706 for special use cases):

---> HTML (with SVG embedded) ---> CSS

while "--->" means that there is one round trip necessary
and "--=>" means there is one round trip necessary but with multiple requests (assumed CSS counts as one request).

So there's 2 round trips in 7.6 which does not increase by this issue (but might have been the reason for a design decision to not use url() syntax together with a http ressource/request in css because that requires 3 round trips).

While 7.6 requires one request per SVG (=> many), this issue requires none.

Upcoming HTTP/2 addresses the number of round trips and requests, however. So even the impact of using url() syntax for a request (instead of embedding SVG) could be limited by then.