m•motiveICONS IN MOTION
← Zurück zur Icon-Sammlung

MOTIVE · ARTIKEL

Wie SVG-Animation funktioniert und was ihre Leistung bestimmt

Eine Glocke schwingt beim Aktivieren einer Erinnerung, ein Häkchen erscheint nach einer Aufgabe. Kleine Bewegungen vermitteln Zustandswechsel. Hier erfährst du, wie SVG sie erzeugt und was bei vielen Icons zu messen ist.

1. Formen mit einem Zeitplan

SVG beschreibt Formen wie path, circle und rect durch Koordinaten und Attribute. viewBox="0 0 24 24" definiert das interne Koordinatensystem; width und height bestimmen die Anzeigegröße. Dieselbe Geometrie lässt sich in mehreren Größen verwenden.

Eine Animation verändert diese Eigenschaften mit der Zeit. Eine Drehung von 0 Grad am Anfang, -18 in der Mitte und wieder 0 am Ende lässt eine Glocke schwingen. Der Browser interpoliert anhand von duration und easing. Ein gespeichertes Bild pro Frame ist nicht nötig.

2. Ein Häkchen durch versetzte Striche zeichnen

Das Häkchen existiert bereits. stroke-dasharray erstellt ein Muster aus Strichen und Lücken. stroke-dashoffset verschiebt dessen Anfang und lässt die Linie sichtbar werden.

Das Beispiel normiert die Distanzberechnung mit pathLength="60" und animiert dashoffset von 60 auf 0. Die 60 steht nicht für Bildschirmpixel. Die Grundattribute zeigen das fertige Häkchen, auch ohne Animation oder bei reduzierter Bewegung. Füge den Code zum Ausprobieren in HTML ein.

MDN · stroke-dashoffsetMDN · pathLength

Ein funktionierendes Zeichenbeispiel

SVG und CSS stehen unten. Du kannst pausieren und fortsetzen; bei reduzierter Bewegung erscheint das fertige Häkchen.

<svg xmlns="http://www.w3.org/2000/svg"
     width="64" height="64" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <style>
    .motive-draw { animation: motive-draw 1.8s ease-in-out infinite; }
    @keyframes motive-draw {
      0% { stroke-dashoffset: 60; }
      60%, 100% { stroke-dashoffset: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .motive-draw { animation: none; }
    }
  </style>
  <path class="motive-draw" d="m6 12 4 4 8-8"
        pathLength="60" stroke-dasharray="60" stroke-dashoffset="0" />
</svg>

3. CSS und die Web Animations API

CSS @keyframes reicht oft für eine vorgegebene Schleife oder einmalige Wiedergabe. Motive-SVGs enthalten ihr CSS und brauchen keine Animationsbibliothek. Interne Elemente eines als img eingebetteten SVGs lassen sich von der Seite nicht direkt auswählen. Für Interaktionen mit einzelnen Formen kommt Inline-SVG infrage.

Die Web Animations API bietet Abspielen, Pausieren und zeitliches Springen für Editoren. Motive erzeugt Vorschau-Keyframes und exportiertes CSS aus demselben Bewegungsmodell, ohne pro Frame den React-Zustand zu ändern. CSS oder JavaScript allein entscheidet nicht über die Rendering-Leistung.

MDN · Web Animations API

4. SVG bedeutet nicht automatisch geringe Kosten

Übertragungsgröße und Wiedergabekosten sind getrennte Größen. Einfache Formen können kompakt sein; komplexe Pfade, Filter und viele DOM-Elemente erhöhen die Arbeit. SVG ist nicht immer kleiner als GIF und garantiert keine feste Bildrate auf allen Geräten.

Der Browser führt die nötigen Schritte für Stil, Layout, Paint und Compositing aus. Animierte Eigenschaften, Zeichenfläche und gleichzeitige Animationen zählen. Prüfe zunächst transform und opacity und miss das tatsächliche Compositing im jeweiligen Browser und SVG.

4. SVG bedeutet nicht automatisch geringe Kosten
EffektTypische EigenschaftenZu prüfende Kosten
Drehung, Bewegung, Skalierung, Einblendentransform, opacityCompositing kann helfen. GPU-Ausführung oder der Wegfall von Paint sind nicht garantiert.
Linien zeichnen, Formen ändernstroke-dashoffset, dPrüfe erneutes Zeichnen. Mehrere komplexe animierte Pfade können viel Arbeit verursachen.
Unschärfe, Schatten, viele Formenfilter, Formanzahl und ZeichenflächeVerkleinere Filterbereiche und Formanzahl und vergleiche Paint-Zeit und Speicher.

web.dev · High-performance CSS animations

5. Vor dem Einbau in die Oberfläche

  • Spiele kurze Erfolgs- oder Fehlermeldungen bei Bedarf ab und prüfe den Zweck einer Endlosschleife.
  • Stoppe Schleifen außerhalb des Bildschirms mit IntersectionObserver und prüfe ausgeblendete Tabs. Motive spielt nur sichtbare Katalogkarten ab.
  • Beachte prefers-reduced-motion: reduce und halte den statischen Zustand verständlich. Nutze aria-hidden für Dekoration und geeignete Alternativtexte für informative Bilder.
  • Reserviere Platz mit width und height. Wiederholte Inline-SVGs brauchen eindeutige IDs für Titel, Masken und Verläufe.
  • Setze will-change nicht vorsorglich für jedes Icon. Miss ein konkretes Problem, wende es gezielt an und vergleiche das Ergebnis.

MDN · prefers-reduced-motion

6. Unter gleichen Bedingungen messen

  1. Halte Icon, Größe, Bewegung und Dauer konstant. Vergleiche beispielsweise 1, 20 und 100 gleichzeitige Animationen und notiere sichtbare sowie gesamte Anzahl.
  2. Nutze einen produktionsnahen Build. Prüfe komprimierte Übertragungsgröße und Anfragen unter Network. Dateigröße allein misst keine Wiedergabekosten.
  3. Zeichne Wiedergabe und Scrollen im Performance-Panel auf und vergleiche Layout, Paint und verzögerte Frames. Bei 60Hz dauert ein Frame etwa 16,7ms für die gesamte Seite. Versprich keine FPS ohne Messung.
  4. Teste auf einem echten Mobilgerät auch reduzierte Bewegung, unsichtbare Icons, ausgeblendete Tabs und endliche Wiederholungen. Halte Gerät, Browser und Bedingungen für reproduzierbare Ergebnisse fest.

Offizielle Dokumentation