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

Question

我将从该网站提取 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 是如何具体的以及如何保存它以便能够将其作为图像打开。

Answer 1

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

此工具可用于 'cleaning' 已被网页删除的 svg 标记。 https://jakearchibald.github.io/svgomg/

我将你想要的 svg 粘贴到工具中，我得到的是：https://imgur.com/fj7bDu6 So i checked the markup in my text editor and there is a single text element at the very end of the file that is not part of any group. Its innerXML consists only of the suspect "nbsp;" aka non-breaking space. If I delete that container element, suddenly my design software will open the SVG without any warnings. But unfortunately it still doesn't look "complete", in fact, it looks identical to how it looks in the web tool. See: https://imgur.com/1XiMg32

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

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

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

Answer 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();

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

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

How to extract and save SVG from a HTML?

html

css

svg