10

I'm trying to preload an SVG logo on my blog, but Chrome keeps giving me a bunch of warnings and I don't seem to be able to fix them.

Logo: https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg
Preload link: <link rel="preload" href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" as="image" type="image/svg+xml" crossorigin="anonymous" />

I'm getting the following warnings in Chrome:

A preload for 'https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

And:

The resource https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.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.

Any pointers?

Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
  • 1
    At the risk of stating the obvious, the browser is saying that it cannot load the svg per CORS policy (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). You may need to check the server side to see how you must fetch the element (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). – vqf Jun 15 '20 at 09:18
  • Ah, I'll look into it – Kees C. Bakker Jun 15 '20 at 10:44

2 Answers2

12

Looks like removing the crossorigin attributes fixes it:

<link rel="preload" 
      href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg"
      as="image"
      type="image/svg+xml" />
Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
  • 1
    I agree that that might have fixed the CORS problem, but in my experience are you not still getting the second "not used" warning from your original question? Certainly in current Chrome stable on Windows 10, I cannot get preload for SVG to work, as corroborated by this bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=1065069 – Codemonkey Jan 28 '21 at 14:47
1

I tried below and works well. Not sure though if it is the best way to do it

fetch('svg-path').then(() => {
  // do load it into your dom using any library you use
  // and it should load without flickering
})

So far works well for me.

demotics2002
  • 792
  • 1
  • 8
  • 20