使用FileSaver.js下载SVG后提示代码无效、命名空间未定义如何解决

问题原因 #

你的代码存在2个核心错误：

• 没有使用完整的SVG元素序列化结果，而是手动拼接固定SVG头+内部内容，原SVG根节点上的xmlns:inkscape等扩展命名空间声明全部丢失，导致SVG内部用到的inkscape:current-layer这类属性没有对应的命名空间定义，触发合法性校验错误。
• 硬编码的SVG头兼容性极差，不同来源的SVG根节点的viewBox、宽高、自定义属性都存在差异，很容易出现头和内部内容不匹配的问题。

修复方案 #

直接使用XMLSerializer序列化完整的原始SVG元素即可，无需手动拼接字符串：

$('.item-download-icon').on('click', function() {
    // 获取原始SVG DOM元素
    const imageToDownload = $(this).parent().siblings('.item-code').find('svg')[0];
    // 序列化完整SVG内容，自动保留所有命名空间和根节点属性
    const serializer = new XMLSerializer();
    const fullSvgStr = serializer.serializeToString(imageToDownload);
    // 生成Blob并下载，指定utf-8编码避免特殊字符乱码
    const blob = new Blob([fullSvgStr], {type: "image/svg+xml;charset=utf-8"});
    saveAs(blob, "custom-illustration.svg");
});

可选优化 #

如果你导出的SVG只用于前端展示，不需要保留Inkscape编辑属性，可以在序列化前清理冗余属性减小文件体积：

// 放在序列化操作前执行即可
const unwantedAttrRegex = /^inkscape:|^sodipodi:/;
[...imageToDownload.querySelectorAll('*')].forEach(element => {
  [...element.attributes].forEach(attr => {
    if (unwantedAttrRegex.test(attr.name)) {
      element.removeAttribute(attr.name);
    }
  });
});

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