Beitrag fürs Wiki/Blog?

[Robert B.]

Hallo,

ich habe mir seit längerem Gedanken gemacht, wie man direkt im HTML notiertes SVG ^[1] speichern bzw. zum Speichern anbieten kann. Bei externen Inhalten (nicht nur Grafiken) habe ich im Kontextmenü immer den Punkt Datei Speichern, bei

<figure>
  <svg width="…" height="…" …>
    <title>Titel der Grafik</title>
    <!-- … Elemente und so … -->
  </svg>
  <figcaption>Eine skalierbare Vektorgrafik</figcaption>
</figure>

nicht (getestet mit Firefox, Chromium, Konqueror und Links2). Um an die Grafik zu kommen, kann ich natürlich den Teilbaum des svg-Elements aus dem DOM kopieren, aber das ist nicht für alle Nutzer eine brauchbare Idee. Dann bin ich über data:-URLs gestolpert und hatte eine Idee:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(evt) {
	let svg = '<?xml version="1.0" encoding="UTF-8"?>'
			+ document.getElementById('svg2').outerHTML;
	const prot = 'data:image/svg+xml;charset=UTF-8';
	document.getElementById('dl_url').href = prot + ','
			+ encodeURIComponent(svg);
});
</script>

<!-- … -->

<figure>
	<svg xmlns="http://www.w3.org/2000/svg"
			id="svg2" version="1.1"
			height="300" width="400" viewBox="0 0 400 300">
		<!-- … -->
	</svg>
	<figcaption>Diese Grafik ist direkt im HTML-Code enthalten.
		Statt des Rechtsklicks auf die Grafik kann ein
		<a id="dl_url">Download-Link für das Kontextmenü</a>
		angegeben werden (sofern JavaScript aktiv ist).
	</figcaption>
</figure>

Das Prinzip ist recht simpel: Ich hole mir den „äußeren HTML-Code“ ^[2] des/der gewünschten SVG(s) und erstelle damit einen Link mit data-URL als Ziel. Man kann den Link nicht anklicken, aber das Ziel per Rechtsklick → Speichern Unter speichern.

Zum Ausprobieren gibt es auch eine fertige Seite, auf der ich außerdem probiert habe, wie sich die Variante mit Base64-Kodierung verhält. Spoiler: Sofern man ASCII-Zeichen verwendet ist das im Browser nicht problematisch, bei Zeichen außerhalb von ASCII wird es interessant: In meiner Grafik (UTF-8) sind Zeichen enthalten, die es auch in ISO-8859-1 gibt. JavaScript speichert diese mit ihren ISO-8859-1-Codepoints in der SVG-Datei, die damit natürlich entgegen der Zeichensatz-Angabe nicht mehr UTF-8 ist. Wenn man dann dem Hinweis in der MDN folgt, erschließt sich, dass man btoa für Unicode (16 Bit Zeichensatz) verwenden muss. Die gespeicherte SVG-Datei ist dann allerdings UTF-16 kodiert.

Meine Frage in die Runde wäre jetzt, ob das ein Thema fürs Wiki oder das Blog wäre?

Viele Grüße
Robert

---

1. Spricht man heute eigentlich noch von Dateninseln? ↩︎

2. siehe auch ↩︎