"invalid SVG Code" 文件中的 SVG 下载结果

Question

我正在建立一个网站，人们可以在其中自定义 SVG 颜色，然后下载它，以便他们拥有与其品牌颜色相匹配的插图（无需使用美术程序）。现在我正在尝试实现下载功能，以便当用户单击该图标时，它会将 SVG 下载到他们的计算机上。

我浏览其他主题得到以下代码：

$('.item-download-icon').on('click', function() {
    let imageToDownload = $(this).parent().siblings('.item-code').find('svg');
    var svg_data = imageToDownload[0].innerHTML;
    console.log(svg_data);
    var head = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">'
    var full_svg = head + svg_data + "</svg>"
    var blob = new Blob([full_svg], {type: "image/svg+xml"});  
    saveAs(blob, "test.svg");
    //console.log(imageToDownload);
});

它使用 FileSaver.js 库。但是，当我下载文件时，尝试使用 illustrator 打开时出现“SVG 无效”错误。当我将它拖入 Chrome 时，会显示：

error on line 11 at column 430: Namespace prefix inkscape for current-layer on namedview is not defined

对我做错了什么有什么想法吗？谢谢！完整 SVG 的文本在这里：https://docs.google.com/document/d/19gOZ7NGjSDP4VrEPgpRuc4Di_4IffuKglkXB4YYGbcU/edit?usp=sharing

谢谢！

Answer 1

您的 SVG 包含 attributes specific to Inkscape，但您尚未定义 inkscape 命名空间 (http://www.inkscape.org/namespaces/inkscape)。

将它包含在你的根元素中可能会解决这个问题，尽管你可能还有其他缺少的命名空间，比如 sodipodi (http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd):

var head = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">'

您还可以选择清理源 SVG 以删除属于这些命名空间的所有元素和属性，但这将限制您在 Inkscape 或其他软件中进一步编辑 SVG 的能力。

"invalid SVG Code" 文件中的 SVG 下载结果

SVG download results in file with "invalid SVG Code"

javascript

jquery

svg

filesaver.js