使用svg2img转换SVG（Base64/文件）为PNG时出现Undefined Buffer错误的解决方法及替代方案咨询

错误原因分析 #

你遇到的TypeError [ERR_INVALID_ARG_TYPE]主要有两个核心诱因：

1. base64Img.base64回调返回的data为undefined：大概率是文件路径path + filename拼接错误，或者目标SVG文件不存在/无读取权限，导致转base64操作失败。
2. 二次编码导致SVG数据无效：你对已经是base64格式的svgString再次调用btoa()，这会把原本有效的SVG编码变成无效内容，svg2img无法解析，最终抛出参数类型错误。

修复后的svg2img使用代码 #

情况1：从Base64 SVG字符串转换

先确保base64Img能正确读取文件并返回有效base64数据，然后直接拼接data:image/svg+xml;base64,前缀即可，不需要二次编码：

const base64Img = require('base64-img');
const svg2img = require('svg2img');
const fs = require('fs');
const path = require('path'); // 记得引入path模块避免路径拼接问题

const filePath = path.join(path, filename); 
base64Img.base64(filePath, function(err, data) { 
    if (err) {
        console.error('读取SVG文件并转base64失败:', err);
        return;
    }
    // data已经是SVG的base64字符串，直接传入svg2img
    svg2img(`data:image/svg+xml;base64,${data}`, function(error, buffer) { 
        if (error) {
            console.error('SVG转PNG失败:', error);
            return;
        }
        fs.writeFileSync('foo2.png', buffer); 
        console.log('PNG文件已生成');
    }); 
});

情况2：直接从SVG文件转换

其实svg2img本身支持直接读取文件路径，不需要先转base64，写法更简洁：

const svg2img = require('svg2img');
const fs = require('fs');
const path = require('path');

const filePath = path.join(path, filename);
// 直接传入SVG文件路径
svg2img(filePath, function(error, buffer) {
    if (error) {
        console.error('转换失败:', error);
        return;
    }
    fs.writeFileSync('foo2.png', buffer);
    console.log('PNG文件已生成');
});

替代工具推荐 #

如果svg2img仍有问题，可以试试这些更稳定的工具：

1. Sharp（高性能推荐）

Sharp是基于libvips的高性能图片处理库，支持SVG转PNG/JPG等多种格式：

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

// 从SVG文件转PNG
sharp(path.join(path, filename))
    .png({ quality: 100 })
    .toFile('foo2.png')
    .then(() => console.log('转换完成'))
    .catch(err => console.error('转换失败:', err));

// 从Base64 SVG转换
const base64Svg = 'data:image/svg+xml;base64,...'; // 你的base64 SVG字符串
const svgBuffer = Buffer.from(base64Svg.split(',')[1], 'base64');
sharp(svgBuffer)
    .jpeg({ quality: 90 }) // 转JPG用这个配置
    .toFile('foo2.jpg')
    .then(() => console.log('转换完成'))
    .catch(err => console.error('转换失败:', err));

2. Canvas（灵活可控）

基于HTML5 Canvas API，适合需要自定义渲染逻辑的场景：

const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');
const path = require('path');

async function svgToPng() {
    const svgContent = fs.readFileSync(path.join(path, filename), 'utf8');
    const img = await loadImage(`data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}`);
    
    const canvas = createCanvas(img.width, img.height);
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    
    fs.writeFileSync('foo2.png', canvas.toBuffer('image/png'));
    console.log('转换完成');
}

svgToPng().catch(err => console.error('转换失败:', err));

内容的提问来源于stack exchange，提问作者Алексей Николаев