Download einer mit Raphael.js erstellten SVG-Datei
0 
molily
Download einer mit Raphael.js erstellten SVG-Datei
Hallo,
ich erstelle zurzeit einen SVG-Editor. Nun soll der User die von ihm erstellte SVG-Datei downloaden können. Raphael.js erstellt die SVG-Grafik direkt in der HTML-Datei. Wie kann man die SVG-Datei dem User nun downloaden lassen oder den SVG-Code in einer separaten SVG-Datei speichern?
-
Hallo,
Raphael.js erstellt die SVG-Grafik direkt in der HTML-Datei. Wie kann man die SVG-Datei dem User nun downloaden lassen oder den SVG-Code in einer separaten SVG-Datei speichern?
Da würde mir spontan einfallen:
1. Das svg-Element im Dokument samt Kindern serialisieren, d.h. in einen String umwandeln. Das geht in neueren Browsern einfach über die innerHTML-Eigenschaft vom Container-Element (dem sogenannten Paper bei Raphael.js). Ich weiß aber nicht, ob Browser das DOM immer korrekt zu einem gültigen SVG-(XML-)Dokument serialisieren.
2. Den String als Inhalt einer Datei verwenden, die zum Download angeboten wird. Das ist ohne einen Server nicht so einfach zu erzwingen.
Eine Möglichkeit wäre, mit http://de.selfhtml.org/javascript/objekte/window.htm#open@title=window.open ein Fenster zu öffnen und es mit http://de.selfhtml.org/javascript/objekte/document.htm#open@title=document.open, http://de.selfhtml.org/javascript/objekte/document.htm#write@title=write und http://de.selfhtml.org/javascript/objekte/document.htm#close@title=close mit den SVG-Daten zu beschreiben. Der Benutzer kann dann die Datei über das Menü speichern.
Eine andere Möglichkeit wäre, eine data-URL zu erzeugen und sie einem Link http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#a@title=zuzuweisen. Der Nutzer kann die Datei dann über »Speichern unter« im Kontextmenu abspeichern.
In beiden Fällen ist die Angabe des MIME-Typs image/svg+xml wichtig (bei document.open bzw. in der data-URL).
Grüße,
Mathias-
Meine Herren,
Eine andere Möglichkeit wäre, eine data-URL zu erzeugen und sie einem Link http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#a@title=zuzuweisen. Der Nutzer kann die Datei dann über »Speichern unter« im Kontextmenu abspeichern.
Mit dem download-Attribut kann man es zusätzlich einigen Nutzern von modernen Browsern noch einfacher machen, dann reicht nämlich ein gewöhnlicher Klick/Touch aus.
-