SVG 下载导致文件中包含“无效的 SVG 代码”

Posted 2023-03-28

【中文标题】SVG 下载导致文件中包含“无效的 SVG 代码”

【英文标题】：SVG download results in file with "invalid SVG Code"

【发布时间】：2021-12-07 18:50:16

【问题描述】：

我正在建立一个网站，人们可以在其中自定义 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

谢谢！

【问题讨论】：

您可以安全地删除x="0px" y="0px"。这些属性在根 <svg> 元素上毫无意义。您还可以删除style="enable-background:new 0 0 800 800;"。 AFAIK 没有 SVG 渲染支持enable-background。事实证明，实施起来太难了。据我所知，将这些属性添加到 SVG 的唯一编辑器是 Adob​​e Illustrator。

【参考方案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 的能力。