The decode()
method of the SVGImageElement
interface initiates asynchronous decoding of an image, returning a Promise
that resolves once the image is decoded and it is safe to append it to the DOM.
The decode()
method of the SVGImageElement
interface initiates asynchronous decoding of an image, returning a Promise
that resolves once the image is decoded and it is safe to append it to the DOM.
js
decode()
None.
A Promise
that fulfills with undefined
once the image data is ready to be used, for example by appending it to the DOM, replacing an existing image, and so forth.
None.
In the below example, you'll likely get an empty image shown on the page as the image is downloaded:
js
const SVG_NS = "http://www.w3.org/2000/svg"; const svg = document.querySelector("svg"); const img = document.createElementNS(SVG_NS, "image"); img.src = "img/logo.svg"; svg.appendChild(img);
Using decode()
will delay inserting the image into the DOM until it is fully downloaded and decoded, thereby avoiding the empty image problem:
js
const SVG_NS = "http://www.w3.org/2000/svg"; const svg = document.querySelector("svg"); async function getImage() { const img = document.createElementNS(SVG_NS, "image"); img.src = "img/logo.svg"; await img.decode(); svg.appendChild(img); const text = document.createElementNS(SVG_NS, "text"); text.textContent = "Image is fully loaded!"; svg.appendChild(text); }
This is particularly useful if you're dynamically swapping an existing image for a new one, and also prevents unrelated paints outside of this code from being held up while the image is decoding.
Specification |
---|
HTML Standard # dom-img-decode-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
decode |
64 | 79 | 68 | No | 51 | No | 64 | 64 | 68 | 47 | No | 9.0 |
HTMLImageElement.decode()
: The same thing, but for HTML <img>
elements
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGImageElement/decode