Node.js下解析SVG远程图片URL并转PNG/JPEG的实现方案

我的SVG文件里有多个<image>元素，示例代码如下：

<image id="image1" width="36" height="36" href="https://IMAGE_URL" preserveAspectRatio="xMidYMid slice" />

我需要把这个SVG转换成PNG或JPEG格式，但用sharp这类库转换后，PNG里的图片区域是空的。我想过把所有图片URL转成base64格式的data URI（比如<image href="data:image/jpeg;base64,ALL_IMAGE_DATA" />），但不知道怎么用Node.js实现。请问该怎么操作？或者有没有其他可行的SVG转图片的方案？

方案一：将远程图片转base64替换SVG中的href #

用Node.js实现的步骤如下：

1. 安装依赖：需要axios请求远程图片、cheerio解析修改SVG DOM

npm install axios cheerio

2. 编写转换脚本：

const axios = require('axios');
const cheerio = require('cheerio');
const fs = require('fs').promises;

async function replaceRemoteImagesWithBase64(svgContent) {
  const $ = cheerio.load(svgContent, { xmlMode: true });
  
  // 遍历所有<image>元素
  const imageElements = $('image');
  for (let i = 0; i < imageElements.length; i++) {
    const $img = $(imageElements[i]);
    // 兼容旧版SVG的xlink:href属性
    const imgUrl = $img.attr('href') || $img.attr('xlink:href');
    
    if (!imgUrl || !imgUrl.startsWith('http')) continue;
    
    try {
      // 请求图片二进制数据
      const response = await axios.get(imgUrl, { responseType: 'arraybuffer' });
      // 从响应头获取图片MIME类型
      const contentType = response.headers['content-type'] || 'image/png';
      // 转换为base64编码
      const base64Data = Buffer.from(response.data).toString('base64');
      // 替换href为data URI
      $img.attr('href', `data:${contentType};base64,${base64Data}`);
      // 同步替换旧版属性
      if ($img.attr('xlink:href')) {
        $img.attr('xlink:href', `data:${contentType};base64,${base64Data}`);
      }
    } catch (err) {
      console.error(`加载图片失败: ${imgUrl}`, err.message);
      // 可选：加载失败时可保留原URL或替换为占位图
    }
  }
  
  return $.xml(); // 返回修改后的SVG内容
}

// 使用示例
async function main() {
  // 读取本地SVG文件
  const originalSvg = await fs.readFile('./input.svg', 'utf8');
  // 替换远程图片为base64
  const modifiedSvg = await replaceRemoteImagesWithBase64(originalSvg);
  // 保存修改后的SVG
  await fs.writeFile('./output-with-base64.svg', modifiedSvg);
  
  // 用sharp转换为PNG
  const sharp = require('sharp');
  await sharp(Buffer.from(modifiedSvg))
    .png()
    .toFile('./final-output.png');
}

main().catch(err => console.error(err));

注意事项 #

• 若图片存在防盗链限制，需在axios请求头中添加Referer或User-Agent模拟浏览器请求
• 大图片转base64会显著增加SVG体积，需注意内存占用

方案二：使用支持加载远程图片的转换工具 #

如果不想手动处理base64，可直接借助浏览器渲染能力完成转换，比如用svg-to-png（依赖puppeteer）：

1. 安装依赖：

npm install svg-to-png puppeteer

2. 编写转换脚本：

const { convert } = require('svg-to-png');
const fs = require('fs').promises;

async function convertSvgToPng() {
  const svgPath = './input.svg';
  const outputPath = './output.png';
  
  // 方式1：从本地SVG文件转换
  await convert(svgPath, './', {
    puppeteerArgs: ['--no-sandbox'] // 服务器环境需开启无沙箱模式
  });
  
  // 方式2：直接传入SVG内容转换
  const svgContent = await fs.readFile(svgPath, 'utf8');
  await convert(Buffer.from(svgContent), outputPath, {
    puppeteerArgs: ['--no-sandbox']
  });
}

convertSvgToPng().catch(err => console.error(err));

这种方案利用浏览器自动加载远程图片并渲染SVG，再完成截图转换，适合复杂SVG场景，无需手动处理资源加载问题。

内容的提问来源于stack exchange，提问作者Tal