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 & Transitions, 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