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.
<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
Loading…
svg.elements.image.fetchpriority
Loading…
svg.elements.script.fetchpriority
Loading…
See also
- SVG
<script>element - HTML
<script>element'sfetchpriorityattribute