How to preload svg sprites?

Question

I have a svg sprites file icons.svg like this:

<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="twitter" viewBox="0 0 512 512">
    <path d="..some path data here..."></path>
  </symbol>

  <symbol id="facebook" viewBox="0 0 512 512">
    <path d="..some path data here..."></path>
  </symbol>
</svg>

That I reference from web page body:

<svg>
    <use xlink:href="/images/common/icons.svg#twitter"></use>
</svg>

I would like to preload icons.svg to avoid flickering. How to do that?

I tried to add link rel preload to head:

<head>
    <link rel="preload" href="/images/common/icons.svg" as="image" type="image/svg+xml"/>
</head>

But it doesn't work. I see icons.svg loaded two times on Chrome developer tools, and the following warning:

The resource http://localhost:57143/images/common/icons.svg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally

.

@enxaneta. I don't fully understand your comment. Icons are shown without problem, I just want to preload them. — Jesús López, Nov 04 '19 at 15:46
I think this is a Chrome bug - I'm seeing the same issue in Chrome. It seems that the disk cache is being used on the second request in my scenario, but it's possible that's circumstantial - ie my 2nd request isn't invoked in parallel with the 1st, so the cached result from the 1st can be used. And FireFox doesn't support preload, making it harder to verify this is a browser bug. — crimbo, Mar 26 '20 at 05:17
I submitted a Chromium bug for this: https://bugs.chromium.org/p/chromium/issues/detail?id=1065069 — crimbo, Mar 26 '20 at 19:10
Looks like if you remove `as="image" type="image/svg+xml"` the svg is preloaded. — allcaps, Jul 16 '20 at 23:44
@Codemonkey. I added the entire svg to index.html at the beginning of the body — Jesús López, Jan 29 '21 at 16:20
It's tempting, but at 9kb gzipped it feels like a lot to be bloating every HTML request with. — Codemonkey, Feb 01 '21 at 14:20
@Codemonkey I think it is not too much bloating. 10 kb using a 100 Mbits/second connection takes about 1 ms. On the other hand the request latency usually might be about 100 ms. Imagine a request that takes 100 ms just to get a 304 Not Modified http code — Jesús López, Feb 01 '21 at 14:26
I agree, but with a far-future caching header the request should never go out anyway, on subsequent page loads. — Codemonkey, Feb 04 '21 at 12:45
The Chromium bug (https://bugs.chromium.org/p/chromium/issues/detail?id=1065069 ) has been confirmed by project members, now just waiting for a fix... In the meantime it looks like preloading just doesn't work for SVG documents used via ``. — crimbo, Sep 15 '21 at 23:42
on librewolf (firefox flavour) the svg file is not cached either & requested again at every use of `use`. Any update on the subject ? imo it is nice to separate code & have separate file fo svg. In the mean time will add some code server side to add the svg file to the html on the fly — mikakun, Oct 02 '22 at 20:48

score 1 · Answer 1 · answered Nov 04 '19 at 15:33

1

Maybe try using prefetch instead if you are not using it right away? it will still be loaded.

  <link rel="prefetch" href="/images/common/icons.svg" as="image" type="image/svg+xml"/>

As it is preloaded as image, using the <img> tag can suppress this warning. Adding an invisible image using this svg somewhere should work:

  <img src="/images/common/icons.svg" style="display: none">

answered Nov 04 '19 at 15:33

42yeah

91
7

3

prefretch doesn't work either. icons.svg loaded twice. The invisible image is not preloaded, it loads later. – Jesús López Nov 04 '19 at 15:48
1

To see if this actually works, you need to see if caching is not disabled in dev-tools while dev-tools is open (which they often are by default). If caching is not disabled, you should see that the preload is loading the file, while the later loading is getting it from cache. – awe Feb 15 '21 at 11:01
1

[`prefetch` is low priority](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) so it can actually end up firing AFTER the element which uses the resource has loaded. It's better suited for loading resources from another page before navigating to it. – Besworks Jun 09 '21 at 20:59

How to preload svg sprites?

1 Answers1