How to extract and save SVG from a HTML?-CodePudding

I would extract SVG background from this website: https://www.jegy.hu/program/a-nagy-gatsby-103655/720007

But when I am saving it:

<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>

I got this error:

Entity 'nbsp' not defined

I red this case here: How do I display html encoded values in svg?

but I could not use.

So how this SVG is specific and how to save it to be able to open it as image.

CodePudding user response：

Unfortunately there's no reliable method to do this, esp. for svgs that are dynamically generated/modified by JS. Design software and web browsers are wildly variable in what svg tags they support and how they render the ones they do support. Web browsers are usually very lax and will try to render even the most mangled markup, while design software tends to be the opposite.

This tool can be helpful for 'cleaning' svg markup that has been butchered by a web page. https://jakearchibald.github.io/svgomg/

I pasted the svg you want into the tool and all I got is this: 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

I went and checked the markup more closely and other than having thousands of unnecessarily redundant tag attributes on literally every XML element, there didn't appear to be anything that was too problematic, so I suspect there is more to that graphic than that single SVG.

Here's that slightly modified version if you want to mess with it yourself - https://wtools.io/paste-code/b7vg

EDIT - See this discussion Background color of tspan element I suspect this is why theres so much missing content in your SVG. Other than a handful of path and rect elements, your svg consists mostly of hundreds of text / tspan elements that (i assume) are for the seat / section display. Setting a background color on tspans is not part of the SVG spec and can only be done w/ HTML/CSS/JS. So if you try to edit this in Inkscape or similar, any colored tspans will either appear to be invisible, or show only their text

CodePudding user response：

In this particular case, a simple XMLSerializer will convert your HTML entity to the corresponding (U 00A0) character.

So you just need to type

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

In your console from that website and the saved image will be "valid".