1. Web
  2. SVG
  3. Reference
  4. Attributes
  5. fetchpriority

fetchpriority

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

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

Browser compatibility

svg.elements.feImage.fetchpriority

svg.elements.image.fetchpriority

svg.elements.script.fetchpriority

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content