SVG Animationen

SVG Animationen sind Animationen von SVG-Elementen (Skalierbare Vektorgrafiken) direkt im Browser – entweder deklarativ über SMIL, über CSS oder via JavaScript – und verbinden die Skalierbarkeit von Vektorgrafiken mit der Ausdrucksstärke von Animation.

Was sind SVG Animationen?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Grafikformat, das nativ im Browser dargestellt wird. Da SVG-Elemente Teil des DOM sind, können sie mit CSS gestylt, per JavaScript manipuliert und auf vielfältige Weise animiert werden.

SVG-Animationen sind ideal für:

• Animierte Icons und Logos
• Infografiken mit Daten-Visualisierungen
• Illustrative Animationen und Charaktere
• Interaktive Karten und Diagramme
• Linienzeichnungs-Animationen (Draw-on-Effekte)

Erklärung

Methoden für SVG-Animationen

Es gibt drei Hauptwege, SVG zu animieren:

1. SMIL (Synchronized Multimedia Integration Language) SMIL ist die native XML-Animations-Syntax innerhalb von SVG:

``xml <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="20" fill="#0078ff"> <animate attributeName="r" values="20;35;20" dur="2s" repeatCount="indefinite"/> <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/> </circle> </svg> ``

SMIL wird von modernen Browsern unterstützt, aber Chrome hat in der Vergangenheit Deprecation-Warnungen ausgegeben. Für neue Projekte bevorzugt man CSS oder JavaScript.

2. CSS-Animationen auf SVG-Elementen

```css .kreis { animation: pulsieren 2s ease-in-out infinite; transform-origin: center; }

@keyframes pulsieren { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } } ```

``xml <svg viewBox="0 0 100 100"> <circle class="kreis" cx="50" cy="50" r="25" fill="#0078ff"/> </svg> ``

Achtung: transform-origin verhält sich in SVG anders als in HTML. Cassie Evans hat dies ausführlich dokumentiert (2021): In SVG bezieht sich transform-origin auf das SVG-Koordinatensystem, nicht auf das Element selbst. Lösung:

``css /* Für inline SVG */ .svg-element { transform-box: fill-box; /* Koordinatenursprung auf das Element */ transform-origin: center; } ``

3. JavaScript (GSAP, WAAPI, vanilla)

Für komplexe Animationen ist JavaScript die mächtigste Option.

Stroke-Dashoffset: Der Linienzeichnungs-Effekt

Der populärste SVG-Animationseffekt ist das schrittweise „Zeichnen" von Pfaden:

```javascript const pfad = document.querySelector('.pfad'); const laenge = pfad.getTotalLength();

// Initialer Zustand: Linie unsichtbar pfad.style.strokeDasharray = laenge; pfad.style.strokeDashoffset = laenge;

// CSS-Animation zum Einzeichnen pfad.style.transition = 'stroke-dashoffset 2s ease-in-out'; pfad.style.strokeDashoffset = 0; ```

Oder mit GSAP:

```javascript gsap.set(pfad, { strokeDasharray: laenge, strokeDashoffset: laenge });

gsap.to(pfad, { strokeDashoffset: 0, duration: 2, ease: 'power2.inOut' }); ```

SVG Morphing

Pfad-Morphing (ein SVG-Pfad verwandelt sich in einen anderen) ist einer der beeindruckendsten SVG-Effekte:

```javascript // Nur mit GSAP MorphSVG Plugin (Club GSAP) import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'; gsap.registerPlugin(MorphSVGPlugin);

gsap.to('#stern', { morphSVG: '#herz', // Stern morpht zu Herz duration: 1, ease: 'power2.inOut' }); ```

Für Open-Source-Morphing: flubber.js (Veltman, 2017).

Animierte Gradients

```css @keyframes gradientBewegung { 0% { stop-color: #0078ff; } 50% { stop-color: #8800ff; } 100% { stop-color: #0078ff; } }

.gradient-stopp1 { animation: gradientBewegung 3s ease infinite; } ```

``xml <svg> <defs> <linearGradient id="animierterGradient"> <stop class="gradient-stopp1" offset="0%" /> <stop offset="100%" stop-color="#ff4400" /> </linearGradient> </defs> <rect fill="url(#animierterGradient)" width="200" height="100"/> </svg> ``

Beispiele

Animiertes Logo (Strich für Strich)

```javascript const pfade = document.querySelectorAll('.logo path');

pfade.forEach(pfad => { const laenge = pfad.getTotalLength(); gsap.set(pfad, { strokeDasharray: laenge, strokeDashoffset: laenge }); });

gsap.to('.logo path', { strokeDashoffset: 0, duration: 0.8, stagger: 0.2, ease: 'power3.out', onComplete: () => { // Nach dem Zeichnen: Füllfarbe einblenden gsap.to('.logo path', { fillOpacity: 1, duration: 0.4 }); } }); ```

Interaktives SVG-Icon (Hamburger → X)

```javascript const hamburger = document.querySelector('.hamburger-btn'); let istOffen = false;

hamburger.addEventListener('click', () => { istOffen = !istOffen;

if (istOffen) { gsap.to('.linie-1', { y: 6, rotation: 45, transformOrigin: 'center', duration: 0.3 }); gsap.to('.linie-2', { opacity: 0, duration: 0.2 }); gsap.to('.linie-3', { y: -6, rotation: -45, transformOrigin: 'center', duration: 0.3 }); } else { gsap.to('.linie-1', { y: 0, rotation: 0, duration: 0.3 }); gsap.to('.linie-2', { opacity: 1, duration: 0.2, delay: 0.1 }); gsap.to('.linie-3', { y: 0, rotation: 0, duration: 0.3 }); } }); ```

Daten-Diagramm animiert

```javascript // Balkendiagramm-Bars einfahren const bars = document.querySelectorAll('.balken');

bars.forEach(bar => { const zielHoehe = bar.dataset.wert; // Aus HTML-Data-Attribut

gsap.from(bar, { scaleY: 0, transformOrigin: 'bottom', duration: 0.8, ease: 'power2.out', scrollTrigger: { trigger: '.diagramm', start: 'top 70%' } }); }); ```

In der Praxis

SVG-Animationen werden oft in Kombination mit Lottie – After Effects Animationen im Web diskutiert. Der Hauptunterschied: Lottie exportiert Animationen aus After Effects als JSON, während native SVG-Animationen direkt im Code definiert werden – was Entwicklern mehr Kontrolle, aber Motion Designern weniger vertraute Werkzeuge bietet.

SVG optimieren vor der Animation: Exportierte SVGs aus Illustrator oder Figma enthalten oft unnötigen Code. Tools:

• SVGO (Kommandozeile) oder SVG OMG (Browser)
• Unnötige IDs, Kommentare, und Präfixe entfernen
• Pfade wo möglich vereinfachen

Performance: SVG-Animationen, die transform und opacity nutzen, sind performant. Animationen auf width, height, x, y (SVG-Attribute statt CSS) können Repaints verursachen.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Kann ich Animationen aus Illustrator direkt verwenden? Illustrator exportiert keine Animationen. Man exportiert SVG (statisch) und animiert anschließend per Code. Für animierten Export: After Effects + Bodymovin → Lottie.

Warum funktioniert meine `transform-origin`-Deklaration nicht wie erwartet? In SVG ist der Standard-Ursprung (0,0) des SVG-Koordinatensystems, nicht das Elementzentrum. transform-box: fill-box löst das Problem.

Unterstützen alle Browser SMIL? Ja, aber Chrome hatte Deprecation-Pläne (nie durchgeführt). Für neue Projekte: CSS oder JS statt SMIL.

Verwandte Einträge

• Lottie – After Effects Animationen im Web – After Effects → SVG/Canvas via JSON
• CSS Animationen (@keyframes) – CSS @keyframes auf SVG-Elementen
• GSAP (GreenSock) – Grundlagen – Mächtigstes Tool für SVG-Animationen
• Web Animations API (WAAPI) – WAAPI funktioniert auch auf SVG-Elementen
• CSS Transforms (2D & 3D) – Transform-Probleme in SVG-Kontext verstehen

Weiterführend

• Cassie Evans: SVG Animations (2021, Talk) – cassie.codes
• Cassie Evans: Transforms on SVG elements – css-tricks.com (2021)
• MDN: SVG animation with SMIL – developer.mozilla.org
• Sarah Drasner: SVG Animations (2017) – O'Reilly Media
• GSAP: SVG Tips for GSAP – greensock.com/svg-tips
• SVGO: github.com/svg/svgo