fetchpriority

Limited availability

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 <img> and <script> elements.

You can use this attribute with the following SVG elements:

• <feimage>
• <image>
• <script>

Usage notes

Value	high | low | auto
Default value	auto

• 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 <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

See also

• SVG <script> element
• HTML fetchpriority attribute