在Node.js中如何将指定URL的SVG图片转换为base64格式

实现方案 #

浏览器端 JavaScript 实现 #

通过fetch请求拉取远程SVG资源，转成Blob后用FileReader读取为base64格式的Data URI：

async function svgUrlToBase64(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error('SVG资源请求失败，请检查链接有效性');
  const svgBlob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(svgBlob);
  });
}

// 调用示例
// svgUrlToBase64('https://example.com/target.svg').then(base64Str => console.log(base64Str))

Node.js 服务端实现 #

通过内置https模块请求资源，拿到Buffer后直接转base64并拼接对应格式头即可：

const https = require('https');

function svgUrlToBase64(url) {
  return new Promise((resolve, reject) => {
    https.get(url, (res) => {
      const chunks = [];
      res.on('data', chunk => chunks.push(chunk));
      res.on('end', () => {
        const svgBuffer = Buffer.concat(chunks);
        const base64Str = `data:image/svg+xml;base64,${svgBuffer.toString('base64')}`;
        resolve(base64Str);
      });
      res.on('error', reject);
    });
  });
}

命令行本地手动转换 #

如果是临时处理少量SVG，可直接用curl和base64命令行工具一键转换：
curl 你的SVG资源链接 | base64 | awk '{print "data:image/svg+xml;base64,"$0}'

注意事项 #

• 浏览器端调用时需要确保目标SVG资源所在服务配置了允许跨域的响应头，否则会触发浏览器同源策略限制，导致请求失败
• 部分社交媒体平台不支持直接使用SVG格式的base64资源，发布前建议先做兼容性验证，如遇不支持的情况，可先将SVG转成PNG/JPG格式后再做base64转换

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