SVGImageElement: метод decode()

Метод decode() интерфейса SVGImageElement инициирует асинхронную декодировку изображения, возвращая Promise, который разрешается, когда изображение декодировано и его безопасно добавить в DOM.

Нет.

Promise, который выполняется с undefined, когда данные изображения готовы к использованию, например, для добавления его в DOM, замены существующего изображения и т.д.

Нет.

В примере ниже, на странице, вероятно, отобразится пустое изображение, пока изображение загружается:

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);

Использование decode() задержит вставку изображения в DOM до его полной загрузки и декодирования, тем самым избегая проблемы с пустым изображением:

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);
}

Это особенно полезно, если вы динамически меняете существующее изображение на новое, а также предотвращает, чтобы не связанные с этим кодом отрисовки зависели от декодирования изображения.

• HTMLImageElement.decode(): То же самое, но для элементов HTML <img>
• Что на самом деле делает атрибут декодирования изображения? на tunetheweb.com (2023)