Menu
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
asvalue and it is preloaded intentionally.
Any pointers?
996
The problem with that is your browser may struggle to display the SVG logo properly, without scaling, since it will try to be as large as possible, struggling to fit in an area as small as your logo. That's why I would always recommend specifying the width and height in terms of pixels.
Preload lets you tell the browser about critical resources that you want to load as soon as possible, before they are discovered in HTML. This is especially useful for resources that are not easily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.
SVG code is loaded faster because there is no need for an HTTP request to load in an image file. The time taken for SVG code is only rendering time. There can be numerous editing and animating opportunities for SVG code like you said.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With