fetchpriority

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:

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.

html
<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" />
</svg>

Browser compatibility

svg.elements.feimage.fetchpriority

svg.elements.image.fetchpriority

svg.elements.script.fetchpriority

See also