Dokumente → SVG → Weiterführende Links

SVG in HTML

… Einbetten

Neben der „klassischen Variante“ SVG als Bilder mit dem img-Element in HTML-Dokumenten zu referenzieren, ist es seit XHTML möglich SVG-Code direkt im Dokument als Dateninsel zu verwenden: 

<html xmlns="http://www.w3.org/1999/xhtml">
…
<body>
	…
	<svg xmlns="http://www.w3.org/2000/svg">
	</svg>
	…
</body>
</html>

Der Code für HTML 5 ist analog dazu und verzichtet auf die XML-Namensraum-Angaben, da SVG nun Teil von HTML 5 ist: 

<html>
…
<body>
	…
	<svg>
	</svg>
	…
</body>
</html>

Größe und viewBox

Die Größe der Grafiken in der HTML-Datei kann mit den Attributen width und height oder den gleichnamigen CSS-Regeln spezifiziert werden. Bei Verwendung des viewBox-Attributs wird die Grafik per Default auf die komplette Viewport-Breite skaliert.

Die vier Werte der viewBox spezifizieren die „Zeichenfläche“ der SVG:

viewBox="x y breite höhe"

Alle Angaben sind in viewBox-Einheiten und geben die minimalen sowie maximalen Werte der Koordinaten innerhalb der Grafik vor; Objekte, deren Koordinaten außerhalb der viewBox liegen, werden an der viewBox-Grenze abgeschnitten:

<svg width="20em" heigh="20em" viewBox="0 0 20 20">
	<circle cx="15" cy="10" r="10" style="stroke:black;fill:red"/>
</svg>

Zentral definierte Styles und Objekte

Für SVG direkt in HTML gelten die gleichen CSS-Regeln sowie Eindeutigkeiten von Klassen und IDs wie für reines HTML, sie gelten global im ganzen HTML-Dokument.

Dies kann genutzt werden CSS-Regeln und Objekte, die in mehreren Grafiken verwendet werden, an zentraler Stelle im Dokument zu definieren und dann in jeder Grafik zu referenzieren. Die CSS-Regeln für die Grafiken passen daher in das globale Stylesheet oder den globalen style-Bereich. Die SVG-Objekte können zum Beispiel in einem nicht-sichtbaren svg am Ende des HTML-body definiert werden:

<svg style="display:none">
	<def>
		…
		Marker, Symbole, Pfade, Objekte, … mit IDs
	</def>
</svg>
</body>

Grafiken Speichern/Exportieren

Skalierbare Vektorgrafiken, die in HTML-Dokumente eingebettet sind, können nicht wie bei referenzierten Grafiken einfach per Kontextmenü → Kopieren in die Zwischenablage kopiert und von dort in eine andere Anwendung eingefügt werden; der Zugriff ist nur über das HTML-DOM möglich. Man muss also manuell mit STRG+U oder die Browser-Entwicklertools (durch Drücken der Taste F12) an den Code heran. Eine Möglichkeit einen Bildexport anzubieten, habe ich im SELFHTML-Blog beschrieben. Die Idee dabei ist mit JavaScript auf den DOM-Teilbaum der Grafik zuzugreifen und daraus einen Download-Link zu generieren.

Beim dort beschriebenen Ansatz ist zu beachten, dass nur die Grafik exportiert wird, aber nicht zentral definierte Styles und Objekte – diese müssen vor dem Speichern zusätzlich in den DOM-Teilbaum der Grafik eingefügt werden.