解碼

decoding 屬性（在 <image> 元素上有效）向瀏覽器提供提示，說明它是否應該與渲染其他內容一起執行影像解碼，從而在一個看起來更“正確”（sync）的呈現步驟中完成，或者先渲染和呈現其他內容，然後再解碼影像並稍後呈現（async）。實際上，async 表示下一個繪製不會等待影像解碼。

在靜態 <image> 元素上使用 decoding 時，通常很難察覺到任何明顯的視覺效果。它們可能會最初渲染為空影像，同時獲取影像檔案（無論是從網路還是從快取獲取），然後無論如何都會獨立處理，因此內容更新的“同步”不太明顯。但是，解碼期間發生的渲染阻塞，雖然通常很小，但可以測量——即使用肉眼很難觀察到。

當透過 JavaScript 將 <image> 元素動態插入 DOM 時，使用不同的 decoding 型別會導致更明顯的差異——有關更多詳細資訊，請參閱 SVGImageElement.decoding。

允許的值

sync

與渲染其他內容一起同步解碼影像，並將所有內容一起呈現。

async

在渲染和呈現其他內容之後非同步解碼影像。

auto

對解碼模式沒有偏好；瀏覽器決定最適合使用者的模式。這是預設值。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image
    href="https://example.com/mdn_logo_dark.png"
    height="200"
    width="200"
    decoding="async" />
</svg>