SVGs fail to render on initial page load in Chrome 84

Question

UPDATE 28 July 2020: There is an ongoing discussion on this issue in the Chromium project: https://bugs.chromium.org/p/chromium/issues/detail?id=1107442&q=svg&can=2. The issue has been resolved in M86 canary and will likely be merged into M85 as well (84 may remain broken).

Cross-post from https://support.google.com/chrome/thread/60499004?hl=en

As of Chrome 84, I'm noticing issues with rendering icons from SVG sprite files if they are not served from the local disk cache. I am able to reliably reproduce with the following example code (assuming cache is disabled in DevTools and/or a force refresh is used):

    <svg>
        <use xlink:href="/path/to/sprites.svg#icon-name"></use>
    </svg>

...where sprites.svg is a static file on the application server, and icon-name is the id of a <symbol> in this file. Pages containing the above code fail to render the icons on the first page load (i.e. the file is not yet cached). I've added a server-side Cache-Control header greater than 0 as suggested by a potentially related thread. This appears to resolve this issue in HTTPS environments, but the SVGs still fail on non-cached load in HTTP environments.

Converting the references to inline SVGs does resolve the issue across both HTTP and HTTPS environments, but such an approach loses the advantage of caching the entire icon set in sprite form for usage across an application. The issue first appeared following an upgrade to Chrome 84 from 83 with no associated code changes.

Answer 1

This is a known issue in Chrome M84 and will be patched in M85 at the latest (currently targeted for stable release on Aug. 22). As suggested in the linked Chromium forum thread, the following solution can serve as a workaround until a fix is made available either as a M84 hotfix or within M85:

document.querySelectorAll('svg').forEach(x => {x.innerHTML = x.innerHTML});