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

一_个前端2025-07-15 15:55

技术要点

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

方法实现

使用XMLHttpRequest同步加载SVG内容；

js 复制代码

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的静态资源处理能力

js 复制代码

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

案例

js 复制代码

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

const image = createImageFromSvgString(rawSvg)