Leitfaden für skalierbare Vektorgrafiken – Teil 1

Zum Einstieg in SVG (und um die Beispiele aus diesem Artikel betrachten zu können) muss man sich den SVG Viewer von Adobe als Download besorgen.

In dem Leitfaden für SVG (Scalable Vector Graphics) werden Beispiele verwendet, die übernommen, je nach Bedarf erweitert oder geändert werden können. Die vollständig funktionsfähigen Beispiele aus diesem Artikel können hier betrachtet werden:

Beispiel A
Beispiel B
Beispiel C
Beispiel D

Einführung in SVG

SVG-Grafiken sind XML-Dokumente mit Anweisungen wie ihre Daten anzuzeigen sind. Dies eignet sich hervorragend für eine Vielzahl von Anwendungen, die Daten und Abbildungen kombinieren, wie zum Beispiel für geographische Einsätze oder Finanzsysteme. Im Unterschied zu GIF- oder JPEG-Bildern kann man auf SVG-Dateien mit einer normalen Textsuche zugreifen. Wenn ein Benutzer also nach einer bestimmten Stadt auf einer Karte oder den Höchst- und Tiefstständen eines Aktienkurses sucht, kann er diese Daten direkt in der Bilddatei finden.

SVG ist ein webbasierter Standard wie XML und HTML, der vom W3C aufgestellt wurde. Die SVG-Datei wird zur Anzeige in einem Webbrowser mithilfe des embed-Tags in eine HTML-Datei eingebunden:

<embed src="test.svg" width="80" 

height="80" type="image/svg+xml" />

SVG-Grafiken bestehen aus einer Reihe grundlegender Formen wie Rechtecke, Kreise und Linien (Abbildung A). Die Formen und ihre Attribute werden als XML-Knoten definiert.

Abbildung A: Grundformen