SVGs fail to render on initial page load in Chrome 84

user_9938640 0
Viewed 1286

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.

google-chrome svg caching
2 Answers

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});
user_99386400

I got the same problem with chrome 84. It looks like this only happens, if you use the same svg-file multiple times in your page. While pageload+svg-load, if the first icon from the SVG-sprite is ready to be rendered, chrome stops reading the rest of the SVG-file, so other icons aren't eventually rendered (or even rendered partially).

As a workaround you can try to add a param to the SVG-path of each SVG-href with different values:

<!-- first icon, add v=1 param -->
<svg>
    <use xlink:href="/path/to/sprites.svg?v=1#icon-name"></use>
</svg>

<!-- second icon, add v=2 param -->
<svg>
    <use xlink:href="/path/to/sprites.svg?v=2#other-icon"></use>
</svg>

This way, chrome should save the SVG-file in different caches, so the loading-interruption of some SVG-icons should not happen.

user_42518360
Related