如何使用JavaScript将base64 png字符串转换为base64 svg字符串

不存在完全无损的直接转换方案，因为PNG和SVG的底层存储逻辑完全不同：PNG是像素点阵构成的位图，SVG是可缩放的矢量描述文件。现有实现方案分为两类：

• 套壳嵌入方案：将PNG作为资源写入SVG文件，本质还是位图，实现成本极低
• 位图矢量化方案：通过算法提取图片轮廓生成纯矢量SVG，效果取决于原图复杂度

方案1：PNG嵌入SVG套壳方案 #

适合不需要真实矢量效果的场景，转换后和原图显示效果完全一致，放大仍会出现锯齿。

/**
 * PNG base64转SVG base64（套壳方案）
 * @param {string} pngInput - 完整PNG datauri，或者不带前缀的base64字符串
 * @param {number} imgWidth - PNG原始宽度
 * @param {number} imgHeight - PNG原始高度
 * @returns {string} 完整SVG datauri字符串
 */
function pngToSvgWrapper(pngInput, imgWidth, imgHeight) {
  // 补全PNG datauri前缀
  const pngDataUri = pngInput.startsWith('data:image/png;base64,') 
    ? pngInput 
    : `data:image/png;base64,${pngInput}`;
  // 拼接SVG内容
  const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${imgWidth}" height="${imgHeight}" viewBox="0 0 ${imgWidth} ${imgHeight}">
  <image href="${pngDataUri}" width="${imgWidth}" height="${imgHeight}"/>
</svg>`;
  // 转成base64格式的SVG datauri
  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgStr)))}`;
}

该方案优缺点：

• 优点：无第三方依赖，转换速度极快，100%保留原图效果
• 缺点：不是纯矢量文件，文件体积比原PNG大10%左右

方案2：纯矢量矢量化转换方案 #

适合logo、图标、线条类低复杂度的PNG转换，生成的SVG可无限放大无锯齿。可以使用开源的Potrace.js算法库实现，示例代码如下：

/**
 * PNG转纯矢量SVG base64
 * @param {string} pngDataUri - 完整PNG datauri字符串
 * @returns {Promise<string>} 矢量SVG datauri
 */
function pngToVectorSvg(pngDataUri) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function() {
      const trace = new Potrace();
      trace.loadImage(img);
      // 可调整阈值、平滑度等参数适配不同图片
      trace.setParameters({
        threshold: 120,
        turdSize: 4,
        alphaMax: 1.2
      });
      trace.process(function() {
        const svgContent = trace.getSVG(1);
        const svgBase64 = btoa(unescape(encodeURIComponent(svgContent)));
        resolve(`data:image/svg+xml;base64,${svgBase64}`);
      });
    };
    img.onerror = reject;
    img.src = pngDataUri;
  });
}

该方案优缺点：

• 优点：生成纯矢量SVG，简单图形转换后体积远小于原PNG，放大无锯齿
• 缺点：彩色/渐变/复杂照片类图片转换效果差，需要根据场景调整参数，转换耗时更长

• 彩色PNG需要矢量化时，要先对图片做颜色分层，每层分别矢量化后再合并，默认Potrace仅支持二值图转换
• 专业设计场景下，手动使用设计工具矢量化的效果远好于自动转换算法

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