SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

SVG hat als Grafikformat viele Vorteile gegenüber Rastergrafiken: Es ist verlustfrei skalierbar, hat viel geringere Dateigrößen und ist flexibel. SVG ist nämlich auch eine Auszeichnungssprache wie HTML, die grafische Objekte durch Grundformen mit ihren Eigenschaften beschreibt. Diese Grafiken können in entsprechenden Programmen gezeichnet, aber auch dynamisch, d. h. mit Skripten erzeugt werden. Dieser Beitrag zeigt, wie SVG-Grafiken mittels JavaScript erzeugt und gestaltet und dann für den weiteren Gebrauch gespeichert werden können.

Neben den üblichen Grundformen wie Rechteck, Kreis oder Ellipse sticht heute zu Ostern natürlich das Ei hervor. Es besteht aus einem Halbkreis und einer halben Ellipse:

<path id="ei"
d="M20,120
a60,60 0 0 0 120,0
a60,90 0 1 0 -120,0"

>

In SVG können Füllungen und Randlinien per CSS gestaltet werden. Dabei sind auch Verläufe und Muster möglich. Probieren Sie unseren Generator aus!

Speichern von inline-SVG

SVG-Grafiken können im img-Element als externe Grafiken eingebunden werden. Nicht nur für die dynamische Erzeugung ist es aber besser, SVG direkt inline im HTML-Markup zu notieren. Bei extern eingebundenen Grafiken bieten Browser im Kontextmenü der Grafik die Option zum Abspeichern, die bei Inline-Grafiken nicht existiert. Um an diese Grafiken zu kommen, kann natürlich der Teilbaum des svg-Elements aus dem DOM kopiert werden. Einfacher geht es mit wenigen Zeilen Javascript einen Download-Button oder -Link anzubieten.

Dazu wird der Teilbaum des svg-Elements extrahiert und in eine Form überführt, mit der sich eine data-URL darstellen lässt, z. B. per URI-Encoding:

let so = document.getElementById('svg2');
let svg = '<?xml version="1.0" encoding="UTF-8"?>'
	+ so.outerHTML;
const uri = 'data:image/svg+xml;charset=UTF-8,'
	+ encodeURIComponent(svg);

Dabei gilt es zu berücksichtigen, dass Standalone-SVGs im svg-Element eine Namensraumangabe benötigen, damit SVG-Viewer und -Editoren damit arbeiten können. Diese wird, da sie in HTML5 nicht erforderlich ist, mit JavaScript ggf. nachträglich eingefügt:

if (so.attributes['xmlns'] === undefined) {
	so.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
}

Um die Download-Option anzubieten, brauchen wir nun noch einen entsprechenden Download-Link, `Grafik Speichern`, dessen href-Attribut wird die entsprechende Data-URL zuweisen:

document.addEventListener('DOMContentLoaded', function(evt) {
	let so = document.getElementById('svg2');
	if (so.attributes['xmlns'] === undefined) {
		so.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
	}
	let svg = '<?xml version="1.0" encoding="UTF-8"?>'
			+ so.outerHTML;
	const prot = 'data:image/svg+xml;charset=UTF-8';
	document.getElementById('dl_url').href = prot + ','
			+ encodeURIComponent(svg);
});

In diesem Fall ist die skalierbare Vektorgrafik statisch. Wenn sie wie bei unseren Ostereiern dynamisch ist, muss natürlich der jeweilige SVG-Baum zum Klick-Zeitpunkt ausgewertet werden:

document.addEventListener('DOMContentLoaded', function(evt) {
	let a = document.getElementById('dl_url');
	a.addEventListener('click', function(e) {
		let so = document.getElementById('svg2');
		if (so.attributes['xmlns'] === undefined) {
			so.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
		}
		let svg = '<?xml version="1.0" encoding="UTF-8"?>'
				+ so.outerHTML;
		const prot = 'data:image/svg+xml;charset=UTF-8';
		a.href = prot + ',' + encodeURIComponent(svg);
	});
});

Weiterführende Gedanken

Der hier vorgestellte Ansatz kann natürlich nicht nur auf einzelne, eindeutige Grafiken mit entsprechenden Links angewendet werden, sondern als Bibliothek z. B. für alle Grafiken in einem Dokument oder alle Grafiken einer bestimmten Klasse. Auch der entsprechende Download-Link kann dann dynamisch ins DOM (z. B. in einer Bildbeschriftung) eingefügt werden.

Denkbar wäre eventuell auch der Einsatz als Bookmarklet.

Metadaten

Da die Grafiken beim Speichern aus dem Kontext der umgebenen Webseite herausgelöst werden, können Sie im SVG-Code entsprechende Metadaten notieren, die dann mitgespeichert werden und so den Kontext weiterhin herstellen. Die freie Software Inkscape erzeugt dazu sehr ausführlichen Code innerhalb des metadata-Elements, an dem man sich orientieren kann – dabei nicht die entsprechenden XML-Namensraum-Angaben vergessen!