title: How to preload an SVG image properly?
body: <p>I'm trying to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content" rel="noreferrer">preload</a> 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.</p>
  
  <p>Logo: <a href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" rel="noreferrer">https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg</a><br/>
  Preload link: <code>&lt;link rel="preload" href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" as="image" type="image/svg+xml" crossorigin="anonymous" /&gt;</code></p>
  
  <p>I'm getting the following warnings in Chrome:</p>
  
  <blockquote>
    <p>A preload for '<a href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" rel="noreferrer">https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg</a>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.</p>
  </blockquote>
  
  <p>And:</p>
  
  <blockquote>
    <p>The resource <a href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" rel="noreferrer">https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg</a> 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 <code>as</code> value and it is preloaded intentionally.</p>
  </blockquote>
  
  <p>Any pointers?</p>