Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVGs in <use> cannot be preloaded with a link@rel=preload #8870

Closed
Boldewyn opened this issue Feb 9, 2023 · 1 comment
Closed

SVGs in <use> cannot be preloaded with a link@rel=preload #8870

Boldewyn opened this issue Feb 9, 2023 · 1 comment

Comments

@Boldewyn
Copy link

Boldewyn commented Feb 9, 2023 •
edited

As far as I can see there is no appropriate value for as to be set to when preloading an SVG that is later used in a <use> element.

In the test case below the image is never pre-loaded. Testd in Chrome and Firefox the first six issue an “image loaded but not used“ warning, the rest an “unknown or unsupported as value” type of warning.

Why is this relevant? Because this is a often-used method to embed SVG icons in a document. Store all icons in an SVG “sprite” image and reference the icon by ID in a minimal SVG snippet in the HTML document. Given the relevance that icons have in many designs this is also a prime example of a resource that should be pre-loaded.

Maybe this is related to this issue in the fetch spec.

Edit: The relevant part in the HTML specification. The relevant part in the fetch specification. (Note the explanatory table missing the <use> case. Pun intended.)

My kitchen-sink test case:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="preload" href="image.svg?1" type="image/svg+xml" as="image" crossOrigin="anonymous">
    <link rel="preload" href="image.svg?2" type="image/svg+xml" as="image" crossOrigin="use-credentials">
    <link rel="preload" href="image.svg?3" type="image/svg+xml" as="image">
    <link rel="preload" href="image.svg?4" type="image/svg+xml" as="fetch" crossOrigin="anonymous">
    <link rel="preload" href="image.svg?5" type="image/svg+xml" as="fetch" crossOrigin="use-credentials">
    <link rel="preload" href="image.svg?6" type="image/svg+xml" as="fetch">
    <link rel="preload" href="image.svg?7" type="image/svg+xml" as="object" crossOrigin="anonymous">
    <link rel="preload" href="image.svg?8" type="image/svg+xml" as="object" crossOrigin="use-credentials">
    <link rel="preload" href="image.svg?9" type="image/svg+xml" as="object">
    <link rel="preload" href="image.svg?10" type="image/svg+xml" as="document" crossOrigin="anonymous">
    <link rel="preload" href="image.svg?11" type="image/svg+xml" as="document" crossOrigin="use-credentials">
    <link rel="preload" href="image.svg?12" type="image/svg+xml" as="document">
    <link rel="preload" href="image.svg?13" type="image/svg+xml" as="embed" crossOrigin="anonymous">
    <link rel="preload" href="image.svg?14" type="image/svg+xml" as="embed" crossOrigin="use-credentials">
    <link rel="preload" href="image.svg?15" type="image/svg+xml" as="embed">
    <!-- "other" is the label that Firefox DevTools use, try that: -->
    <link rel="preload" href="image.svg?16" type="image/svg+xml" as="other" crossOrigin="anonymous">
    <link rel="preload" href="image.svg?17" type="image/svg+xml" as="other" crossOrigin="use-credentials">
    <link rel="preload" href="image.svg?18" type="image/svg+xml" as="other">
    <!-- no as attribute at all -->
    <link rel="preload" href="image.svg?19" type="image/svg+xml" crossOrigin="anonymous">
    <link rel="preload" href="image.svg?20" type="image/svg+xml" crossOrigin="use-credentials">
    <link rel="preload" href="image.svg?21" type="image/svg+xml">
    <title></title>
  </head>
  <body>
    <div>
      <svg><use href="image.svg?1#path"/></svg>
      <svg><use href="image.svg?2#path"/></svg>
      <svg><use href="image.svg?3#path"/></svg>
      <svg><use href="image.svg?4#path"/></svg>
      <svg><use href="image.svg?5#path"/></svg>
      <svg><use href="image.svg?6#path"/></svg>
      <svg><use href="image.svg?7#path"/></svg>
      <svg><use href="image.svg?8#path"/></svg>
      <svg><use href="image.svg?9#path"/></svg>
      <svg><use href="image.svg?10#path"/></svg>
      <svg><use href="image.svg?11#path"/></svg>
      <svg><use href="image.svg?12#path"/></svg>
      <svg><use href="image.svg?13#path"/></svg>
      <svg><use href="image.svg?14#path"/></svg>
      <svg><use href="image.svg?15#path"/></svg>
      <svg><use href="image.svg?16#path"/></svg>
      <svg><use href="image.svg?17#path"/></svg>
      <svg><use href="image.svg?18#path"/></svg>
      <svg><use href="image.svg?19#path"/></svg>
      <svg><use href="image.svg?20#path"/></svg>
      <svg><use href="image.svg?21#path"/></svg>
    </div>
  </body>
</html>
<!-- store as image.svg alongside above HTML -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  width="20"
  height="20"
  viewBox="0 0 20 20">
  <path id="path" d="M0,0H20V20H0z" fill="green" stroke="red" stroke-width="2"/>
</svg>
@domenic
Copy link
Member

domenic commented Feb 15, 2023

I think this is indeed a subset of whatwg/fetch#1012. Let's track the issue there.

@domenic domenic closed this as completed Feb 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Boldewyn @domenic