Hochladen eines React-rendered SVG

Question

In meiner App können Benutzer kleine Zeichnungen in SVG machen, die ich mit React rendere. Ich möchte die SVG auf meinen Server hochladen.

Wie könnte ich das SVG zu einem Javascript-Bild rendern, damit ich es auf meinen Server hochladen kann? Google-Suchen liefern keine aussagekräftigen Ergebnisse.

Answer 1

Dies ist nicht spezifisch zu reagieren, sondern ein in doc <svg> in eine SVG-Datei zu konvertieren, müssen Sie nur noch die Markup-String (cf XMLSerializer) serialisiert werden und die resultierende Zeichenfolge in einem Blob anhängen und den Blob Upload auf Ihre Server.

Aber wenn Sie ein komplettes Stand-alone-SVG-Dokument mögen, mit Doctype und Namespaces, hier ist ein Beispiel dafür, wie es zu tun:

function svgNodeToBlob(node) { 
 
    // first an doctype 
 
    var svgDocType = document.implementation.createDocumentType('svg', "-//W3C//DTD SVG 1.1//EN", "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"); 
 
    // then a new SVG Document 
 
    var svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType); 
 
    // set its documentElement to our root svg node (well a clone of it) 
 
    svgDoc.replaceChild(node.cloneNode(true), svgDoc.documentElement); 
 
    // serialize the document 
 
    var svgData = (new XMLSerializer()).serializeToString(svgDoc); 
 
    // convert to a blob 
 
    var blob = new Blob([svgData], { 
 
    type: 'image/svg+xml; charset=utf8' 
 
    }); 
 
    return blob; 
 
} 
 

 
var blob = svgNodeToBlob(document.querySelector('svg')); 
 
// from here you can send the blob to your server 
 

 
// for the demo, we'll just make an downloadable link from it 
 
var a = document.querySelector('a'); 
 
a.href = URL.createObjectURL(blob); 
 
a.download = 'mycoolsvgfile.svg';

<svg> 
 
    <rect width="50" height="50" x="20" y="10"/> 
 
</svg> 
 
<a>download as file</a>

Aber beachten Sie, dass alle externen Ressourcen das hat Einflüsse auf Ihren Knoten nicht auf die Datei haben (dh wenn Sie etwas mit CSS aus einem externen Stylesheet machen). In diesem Fall müssten Sie einen Klon dieser externen Elemente in den geklonten Knoten einfügen, bevor Sie ihn an das SVG-Dokument anhängen.