fetchpriority

{{SeeCompatTable}} {{non-standard_header}} 

The fetchpriority attribute provides a hint to the browser about the relative priority to use when fetching an external resource. This works the same way as the fetchpriority attribute for the HTML {{HTMLElement("img", "", "#fetchpriority")}}  and {{HTMLElement("script", "", "#fetchpriority")}}  elements.

You can use this attribute with the following SVG elements:

• {{SVGelement("feimage")}} 
• {{SVGelement("image")}} 
• {{SVGelement("script")}} 

Usage notes

• high
  • : Fetches the external resource at a high priority relative to other external resources.
• low
  • : Fetches the external resource at a low priority relative to other external resources.
• auto
  • : Doesn’t set a preference for the fetch priority. It is used if no value or an invalid value is set. This is the default.

Examples

This example shows how to set an SVG {{SVGelement("script")}}  element priority to high.

<svg
  viewBox="0 0 10 10"
  height="120px"
  width="120px"
  xmlns="http://www.w3.org/2000/svg">
  <circle id="normal" cx="5" cy="5" r="4" />
  <script href="./color-change.js" fetchpriority="high"></script>
</svg>

Browser compatibility

{{Compat}} 

See also

• SVG {{SVGelement("script")}}  element
• HTML fetchpriority attribute