Das SVG-Tutorial

Zwölf Kapitel in fünf Teilen, vom ersten Dokument bis zur fertig optimierten Grafik. Wer neu anfängt, liest von oben nach unten. Wer etwas Bestimmtes sucht, springt direkt hinein.

Jedes Kapitel erklärt ein Thema mit lauffähigen Beispielen. Die Grafiken sind direkt im Quelltext der Seite eingebettet, unter jeder Zeichenfläche steht der vollständige Code. Du kannst ihn kopieren, als .svg-Datei speichern und im Browser verändern. Am meisten lernst du, wenn du die Zahlen in den Beispielen änderst und nachsiehst, was passiert.

Die Reihenfolge folgt dem, was man beim Lernen tatsächlich braucht: zuerst das Grundgerüst und die einfachen Formen, dann Pfade als wichtigstes Element, danach Farben und Text. Teil 2 erklärt, wie Koordinaten und Wiederverwendung funktionieren. Erst dann lohnen sich Effekte, Animation und Scripting, weil sie auf allem davor aufbauen.

Teil 1: Grundlagen

1. 01Das erste SVG-Dokument<svg> xmlns viewBoxGrundgerüst einer Datei und die vier Wege in die Webseite.
2. 02Grundformen<rect> <circle> <ellipse> <line> <polyline> <polygon>Rechteck, Kreis, Ellipse, Linie und Vielecke mit ihren Attributen.
3. 03Linien und Pfade<path> d M L H V C S Q T A ZDie Befehle im d-Attribut, Bézierkurven und Bögen.
4. 04Farben, Verläufe, Musterfill stroke <linearGradient> <radialGradient> <stop> <pattern>Farbangaben, lineare und radiale Verläufe, gekachelte Muster.
5. 05Text in SVG<text> <tspan> <textPath> text-anchorGrundlinie, Ausrichtung, tspan und Schrift entlang eines Pfads.

Teil 2: Koordinaten und Wiederverwendung

1. 06viewBox und KoordinatenviewBox preserveAspectRatio transform <g>Ausschnitt, Skalierung, Seitenverhältnis und Transformationen.
2. 07use, symbol, Links, Bilder<defs> <use> <symbol> <a> <image>Elemente mehrfach nutzen, Icon-Sprites, Links und Fotos.

Teil 3: Grafische Effekte

1. 08Beschneiden und Maskieren<clipPath> <mask> clip-path maskHarte Schnittkanten und weiche Masken im Vergleich.
2. 09Filter und Effekte<filter> feGaussianBlur feDropShadow feTurbulence feDisplacementMap feColorMatrixWeichzeichner, Schatten, Rauschen und Verzerrung als Filterkette.

Teil 4: Animation

1. 10Animation<animate> <set> <animateTransform> <animateMotion>Bewegung, Farbe und Form über die Zeit verändern, ohne Skript.

Teil 5: Scripting und Praxis

1. 11SVG und JavaScriptgetElementById setAttribute createElementNS getBBoxElemente finden, ändern, erzeugen und auf Klicks reagieren.
2. 12Optimieren und zugänglich machen<title> <desc> role aria-labelledbyDateien verkleinern, Grafiken beschreiben, Uploads absichern.