Vite项目中SVG同步转换成Image对象

技术要点

1. 使用XMLHttpRequest同步加载SVG内容；
2. 结合Vite的静态资源处理能力

方法实现

使用XMLHttpRequest同步加载SVG内容；

export function createImageFromSvgString(rawSvg: string) {
  const blob = new Blob([rawSvg], { type: "image/svg+xml" });
  const url = URL.createObjectURL(blob);
  const img = new Image();
  img.src = url;
  return img;
}

结合Vite的静态资源处理能力

import rawSvg from '@/assets/svg/test.svg?raw';

案例

import rawSvg from '@/assets/svg/test.svg?raw';

const image = createImageFromSvgString(rawSvg)