解码

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>