Das erste SVG-Dokument
Eine SVG-Datei ist eine Textdatei. Du kannst sie in jedem Editor öffnen, lesen und von Hand schreiben. Dieses Kapitel zeigt das kleinste sinnvolle Dokument und erklärt jede Zeile.
Ein Dokument mit drei Zeilen
SVG beruht auf XML. Das bedeutet: Jedes Element hat einen öffnenden und einen schließenden Tag oder schließt sich mit /> selbst, Attributwerte stehen in Anführungszeichen, und Groß- und Kleinschreibung zählt. Ein <Rect> ist für den Browser kein Rechteck, ein <rect> schon.
Das folgende Dokument ist vollständig. Speicherst du es als kreis.svg und ziehst die Datei in ein Browserfenster, siehst du einen blauen Kreis.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="300" height="180">
<rect x="1" y="1" width="198" height="118" fill="none" stroke="#9aa3b2"/>
<circle cx="100" cy="60" r="40" fill="#1f5fd1"/>
</svg>Was die einzelnen Teile bedeuten
Das Wurzelelement <svg> umschließt alles. Es legt die Zeichenfläche fest, auf der alle anderen Elemente liegen.
Der Namespace xmlns="http://www.w3.org/2000/svg" sagt dem Programm, dass die Elemente zum SVG-Vokabular gehören. Die Adresse wird nicht aufgerufen, sie dient nur als eindeutiger Name. In einer eigenständigen .svg-Datei ist er Pflicht. Fehlt er, zeigen Browser die Datei als XML-Baum an oder gar nicht. Steht das SVG direkt im HTML-Quelltext, kann er entfallen, weil der HTML-Parser SVG selbst erkennt.
width und height bestimmen, wie groß die Grafik auf dem Bildschirm erscheint. viewBox bestimmt dagegen, welches Koordinatensystem innen gilt. Im Beispiel reicht es von 0 bis 200 in der Breite und von 0 bis 120 in der Höhe. Da die Grafik in 300 × 180 Pixeln angezeigt wird, entspricht eine Einheit 1,5 Pixeln. Dieses Zusammenspiel ist so wichtig, dass es ein eigenes Kapitel zu viewBox gibt.
Ältere Anleitungen beginnen zusätzlich mit einer XML-Deklaration und einer Dokumenttyp-Angabe (DOCTYPE) mit Verweis auf die DTD von SVG 1.1. Beides schadet nicht, wird aber nicht mehr gebraucht. Das W3C rät inzwischen sogar davon ab, für SVG eine DTD anzugeben. Die XML-Deklaration ist nur nötig, wenn die Datei nicht in UTF-8 gespeichert ist.
Das Koordinatensystem
Der Ursprung liegt in der linken oberen Ecke. Die x-Achse wächst nach rechts, die y-Achse nach unten. Wer aus der Schulmathematik kommt, stolpert darüber am Anfang regelmäßig: Ein größerer y-Wert bedeutet tiefer, nicht höher. Der Kreis im Beispiel hat seinen Mittelpunkt bei cx="100" und cy="60", also genau in der Mitte der 200 × 120 großen Fläche.
Einheiten musst du meist nicht angeben. Zahlen ohne Einheit gelten als „user units“ im Koordinatensystem der viewBox. Möglich sind auch px, mm, cm oder Prozentangaben, in der Praxis arbeitet man aber fast immer einheitenlos und skaliert über die viewBox.
Vier Wege in die Webseite
| Weg | Schreibweise | Gut für | Einschränkung |
|---|---|---|---|
| Bild | <img src="logo.svg" alt="…"> | Logos, Illustrationen | keine Skripte, kein Zugriff per CSS von außen |
| CSS-Hintergrund | background-image: url(muster.svg) | Muster, Dekor | rein dekorativ, kein Alternativtext |
| Inline | <svg>…</svg> im HTML | Icons, interaktive Grafiken | vergrößert das HTML, wird nicht separat gecacht |
| Objekt | <object data="plan.svg" type="image/svg+xml"> | interaktive Grafiken als eigene Datei | eigenes Dokument, Styling von außen schwierig |
Für Logos und Illustrationen ist <img> der einfachste Weg. Willst du Teile der Grafik per CSS einfärben oder mit JavaScript ansprechen, gehört das SVG inline in den Quelltext. Alle Beispiele auf dieser Website sind übrigens inline eingebettet: Was du siehst, ist der Code darunter, vom Browser gezeichnet.
Der richtige Medientyp
Liefert ein Webserver SVG-Dateien nicht als image/svg+xml aus, zeigen Browser sie nicht als Bild an. Das war früher eine häufige Fehlerquelle bei selbst eingerichteten Servern. Moderne Hoster kennen den Typ, bei einem eigenen Server lohnt sich ein Blick in die Konfiguration.
Werkzeug: ein Texteditor reicht
Zum Schreiben genügt jeder Editor. Praktisch ist einer mit Syntaxhervorhebung für XML, dann fallen vergessene Anführungszeichen oder schließende Tags sofort auf. Zum Prüfen öffnest du die Datei einfach im Browser und lädst nach jeder Änderung neu. Grafikprogramme wie Inkscape erzeugen ebenfalls SVG, schreiben aber viele zusätzliche Angaben in die Datei. Wie man die wieder loswird, steht im Kapitel SVG optimieren.
Als Nächstes kommen die Grundformen: Rechteck, Kreis, Ellipse, Linie und Vieleck. Mit ihnen lässt sich schon ein großer Teil einfacher Grafiken bauen.