如何从 HTML 中提取和保存 SVG？答案

【问题标题】：How to extract and save SVG from a HTML?如何从 HTML 中提取和保存 SVG？
【发布时间】：2021-12-11 06:13:22
【问题描述】：

我会从这个网站提取 SVG 背景：https://www.jegy.hu/program/a-nagy-gatsby-103655/720007

但是当我保存它时：

<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#" 
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
     version="1.1" 
     preserveAspectRatio="xMidYMin" 
     width="1000" 
     height="1000" 
     id="svg19807" 
     sodipodi:docname="3348_structure_háttér.svg" 
     inkscape:version="0.92.2 (5c3e80d, 2017-08-06)" 
     style="transform-origin: left top; transform: translate3d(0px, 0px, 0px) scale(0.53);">
  <metadata id="metadata19813">
    <rdf:rdf>
      <cc:work rdf:about="">
        <dc:format>image/svg+xml</dc:format>

我收到了这个错误：

Entity 'nbsp' not defined

我把这个案子放在这里：How do I display html encoded values in svg?

但我无法使用。

那么这个 SVG 是如何具体的以及如何保存它以便能够将其作为图像打开。

【问题讨论】：

在 HTML 中，&nbsp; 表示 non-breaking space。您可以（通常）用文字空间安全地替换它。

标签： html css svg

【解决方案1】：

不幸的是，没有可靠的方法可以做到这一点，尤其是。用于由 JS 动态生成/修改的 svg。设计软件和网络浏览器在它们支持的 svg 标签以及它们如何呈现它们所支持的标签方面千差万别。 Web 浏览器通常非常松散，甚至会尝试呈现最混乱的标记，而设计软件往往相反。

此工具有助于“清理”已被网页破坏的 svg 标记。 https://jakearchibald.github.io/svgomg/

我将你想要的 svg 粘贴到工具中，我得到的只是：https://imgur.com/fj7bDu6 所以我在我的文本编辑器中检查了标记，文件末尾有一个文本元素，它不属于任何组。它的 innerXML 仅包含可疑的“nbsp;”。又名非破坏空间。如果我删除那个容器元素，突然我的设计软件会打开 SVG 而没有任何警告。但不幸的是，它看起来仍然不“完整”，事实上，它看起来与它在网络工具中的外观相同。见：https://imgur.com/1XiMg32

我更仔细地检查了标记，除了在每个 XML 元素上都有数千个不必要的冗余标记属性之外，似乎没有任何问题太大，所以我怀疑该图形比那个单一的 SVG。

如果你想自己弄乱它，这里是稍微修改过的版本 - https://wtools.io/paste-code/b7vg

编辑 - 请参阅此讨论 Background color of tspan element 我怀疑这就是为什么您的 SVG 中缺少这么多内容的原因。除了少数 path 和 rect 元素之外，您的 svg 主要由数百个 text / tspan 元素组成（我假设）用于座位 / 部分显示。在 tspans 上设置背景颜色不是 SVG 规范的一部分，只能使用 HTML/CSS/JS 完成。因此，如果您尝试在 Inkscape 或类似工具中进行编辑，任何彩色的 tspan 要么看起来不可见，要么只显示它们的文本

【讨论】：

【解决方案2】：

在这种特殊情况下，一个简单的 XMLSerializer 会将您的 HTML 实体转换为相应的 (U+00A0) 字符。

所以你只需要输入

blob = new Blob([new XMLSerializer().serializeToString($("svg")[0])]);
a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "file.svg";
a.click();

在该网站的控制台中，保存的图像将是“有效的”。

【讨论】：