SVG verstehen und selbst schreiben
Scalable Vector Graphics, kurz SVG, ist das Grafikformat des Webs für Logos, Icons, Diagramme und Illustrationen. Eine SVG-Datei ist lesbarer Text, und wer die Sprache versteht, kann Grafiken von Hand schreiben, reparieren und verändern.
Diese Seiten erklären SVG von Grund auf: vom ersten Rechteck über Pfade und Farbverläufe bis zu Filtern, Animation und Scripting. Jedes Beispiel ist direkt in den Quelltext eingebettet. Was du siehst, zeichnet dein Browser gerade aus dem Code darunter.
Zur Übersicht aller Kapitel oder direkt mit dem ersten Dokument beginnen.
Was SVG ist
SVG ist eine Beschreibungssprache für zweidimensionale Vektorgrafiken, entwickelt vom World Wide Web Consortium (W3C) und aufgebaut auf XML. Statt einzelne Bildpunkte zu speichern, beschreibt eine SVG-Datei Formen: ein Kreis mit Mittelpunkt und Radius, eine Linie von hier nach dort, eine Kurve mit zwei Kontrollpunkten. Erst der Browser rechnet diese Beschreibung in Pixel um, und zwar in genau der Auflösung, die der Bildschirm gerade hat.
Daraus ergibt sich der größte Vorteil: SVG-Grafiken bleiben in jeder Größe scharf. Ein Logo sieht auf dem Smartphone, dem 4K-Monitor und im Ausdruck gleich sauber aus. Weil die Datei aus Text besteht, ist sie bei einfachen Motiven oft winzig, lässt sich gut komprimieren, mit CSS gestalten und mit JavaScript verändern. Texte in einer SVG-Grafik bleiben Text, den man markieren und durchsuchen kann.
Vektor oder Raster?
| SVG (Vektor) | JPEG, PNG, WebP (Raster) | |
|---|---|---|
| Speichert | Formen und Koordinaten | Bildpunkte |
| Vergrößern | ohne Qualitätsverlust | wird unscharf oder pixelig |
| Ideal für | Logos, Icons, Diagramme, Karten | Fotos, komplexe Bilder |
| Bearbeiten | im Texteditor oder Zeichenprogramm | in der Bildbearbeitung |
Für Fotos ist SVG ungeeignet, denn ein Foto in Formen zu zerlegen ergäbe riesige Dateien. Beides lässt sich aber kombinieren: SVG kann Rasterbilder einbinden, beschneiden und mit Filtern bearbeiten.
Eine kurze Geschichte
1998 lagen dem W3C gleich mehrere Vorschläge für ein Vektorformat im Web vor, darunter PGML von Adobe, IBM, Netscape und Sun sowie VML, an dem unter anderem Microsoft und Macromedia beteiligt waren. Die neu gegründete SVG-Arbeitsgruppe übernahm keinen davon direkt, sondern entwickelte ein eigenes Format. Am 4. September 2001 wurde SVG 1.0 zur offiziellen W3C-Empfehlung, im Januar 2003 folgte SVG 1.1, das bis heute die Grundlage bildet. Eine überarbeitete zweite Ausgabe erschien 2011, SVG 2 ist seit 2016 als Kandidatenempfehlung in Arbeit.
In den ersten Jahren brauchte man ein Browser-Plugin, um SVG zu sehen, meist den SVG Viewer von Adobe. Nach und nach lernten die Browser das Format selbst: Firefox, Opera und Safari ab Mitte der 2000er-Jahre, der Internet Explorer erst mit Version 9 im März 2011. Seitdem können alle verbreiteten Browser SVG ohne Zusatzsoftware darstellen, und das Format ist aus dem Web nicht mehr wegzudenken.
Das Tutorial
Die zwölf Kapitel bauen aufeinander auf, lassen sich aber auch einzeln lesen. Neben jedem Titel stehen die Elemente und Attribute, um die es geht.
- 01Das erste SVG-Dokument
<svg> xmlns viewBox - 02Grundformen
<rect> <circle> <ellipse> <line> <polyline> <polygon> - 03Linien und Pfade
<path> d M L H V C S Q T A Z - 04Farben, Verläufe, Muster
fill stroke <linearGradient> <radialGradient> <stop> <pattern> - 05Text in SVG
<text> <tspan> <textPath> text-anchor - 06viewBox und Koordinaten
viewBox preserveAspectRatio transform <g> - 07use, symbol, Links, Bilder
<defs> <use> <symbol> <a> <image> - 08Beschneiden und Maskieren
<clipPath> <mask> clip-path mask - 09Filter und Effekte
<filter> feGaussianBlur feDropShadow feTurbulence feDisplacementMap feColorMatrix - 10Animation
<animate> <set> <animateTransform> <animateMotion> - 11SVG und JavaScript
getElementById setAttribute createElementNS getBBox - 12Optimieren und zugänglich machen
<title> <desc> role aria-labelledby
Was du brauchst
Einen Texteditor und einen aktuellen Browser. Mehr ist für den Anfang nicht nötig. Lege eine Datei mit der Endung .svg an, schreibe den Code aus den Beispielen hinein und öffne sie im Browser. Für größere Zeichnungen lohnt sich ein Vektorprogramm wie das freie Inkscape, dessen Ergebnis du mit dem Wissen aus diesem Tutorial gezielt nachbearbeiten kannst.
Vorkenntnisse in HTML und CSS helfen, sind aber keine Voraussetzung. Für das Kapitel über Scripting solltest du die Grundlagen von JavaScript kennen.
Weiterlesen
Die verbindliche Beschreibung des Formats ist die Spezifikation des W3C. Sie ist vollständig, aber als Lehrbuch wenig geeignet. Gut zum Nachschlagen sind die Referenz von MDN und das freie Lehrbuch zu SVG bei Wikibooks. Eine Auswahl mit kurzen Erklärungen steht auf der Seite Werkzeuge und Weblinks.
Wer wissen möchte, wie die Seiten hier entstehen und woher die Angaben stammen, findet das unter Über das Projekt.