调用createImageBitmap从SVG生成bitmap时报源图像无法解码错误

错误原因与修复方案 #

createImageBitmap 对 SVG 资源的解析限制比常规 <img> 标签加载、Canvas 绘制 SVG 的限制更严格，触发解码失败的常见诱因及对应修复方法如下：

• SVG 缺少明确的固定宽高属性
  这是最高发的诱因。createImageBitmap 解码时要求 SVG 根节点必须声明非百分比的固定 width、height 属性，不能仅依赖 viewBox 适配尺寸，常规加载 SVG 时浏览器会自动补全默认尺寸，但该逻辑不适用于 createImageBitmap 解析流程。
  修复方法：在你的 SVG 文件根 <svg> 标签中添加明确的宽高值，示例如下：

  <svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <!-- 原有SVG内容 -->
  </svg>
  

• Blob 未指定编码格式
  SVG 包含特殊字符、非英文内容时，未声明编码会导致解析错乱。
  修复方法：构造 Blob 时指定 UTF-8 编码：

  const svgBlob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
  

• SVG 引用外部资源
  createImageBitmap 不允许 SVG 内引用外部图片、字体、CSS 等资源，所有依赖资源必须内嵌为 Base64 格式，否则会触发解码失败。常规加载时浏览器允许加载跨域缓存资源的逻辑，同样不适用于该解析场景。

兼容 fallback 方案 #

如果上述修改后仍无法正常解码，可以通过先加载到 Image 对象的方式绕开直接解析 Blob 的限制：

const response = await fetch(MARKER_PATH);
const svgStr = await response.text();
const svgBlob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);
const img = new Image();
img.onload = async () => {
  this.marker = await createImageBitmap(img);
  URL.revokeObjectURL(url); // 及时释放内存
};
img.src = url;

内容的提问来源于stack exchange，提问作者Antonio Gamiz Delgado