Online Tool Store
SVG Animator
Animieren Sie SVG-Elemente mit CSS Keyframes und Übergängen, stellen Sie Timing, Easing und Loop-Zähler ein und exportieren Sie animierte SVG-Dateien.
🔒 Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden niemals an einen Server hochgeladen.
Design & Farbe
SVG Animator
Preview
Draw works best on stroked <path> shapes. This SVG looks fill-only, so the outline may not appear to draw — the original artwork is left intact.
Generated CSS
Everything runs in your browser. Your SVG is never uploaded to a server.
So funktioniert der SVG-Animator
- Fügen Sie das SVG hinzu und wählen Sie den Animationstyp.
- Legen Sie Dauer und Easing fest — Draw-on-Effekte wirken am besten zwischen ein und zwei Sekunden.
- Behalten Sie die Reduced-Motion-Schutzmaßnahme bei und fügen Sie dann das SVG und sein CSS in Ihre Seite ein.
Die Methode
Ein Draw-on-Effekt funktioniert, indem das Strichmuster auf die volle Pfadlänge gesetzt und der Offset von dieser Länge auf null animiert wird.
stroke-dasharray: L; stroke-dashoffset: L → 0, wobei L die Pfadlänge ist
Ein falsches L ist der Grund, warum Draw-on-Animationen manchmal teilweise gezeichnet starten oder zu früh enden — das Strichmuster muss zur tatsächlichen Pfadlänge passen.
FAQ
Warum beginnt meine Draw-on-Animation auf halbem Weg?
Weil der dasharray-Wert nicht mit der tatsächlichen Länge des Pfads übereinstimmt. Messen Sie den Pfad mit getTotalLength und verwenden Sie diese Zahl, statt sie zu schätzen.
Sollte SVG mit CSS oder SMIL animiert werden?
CSS, für alles Neue. SMIL-Animation ist in manchen Engines veraltet und die Unterstützung ist uneinheitlich; CSS-Keyframes und -Transformationen werden gut unterstützt und sind leichter zu steuern.
Warum prefers-reduced-motion beachten?
Weil Bewegung bei manchen Menschen Übelkeit und vestibuläre Symptome auslöst, und die Betriebssystemeinstellung ist, wie sie um weniger davon bitten. Sie zu beachten ist eine Zwei-Zeilen-Media-Query.
Wie wir abschneiden
| Merkmal | Online Tool Store | Eine Design-App | Ein Style-Guide-PDF |
|---|---|---|---|
| Reduced-Motion-Schutz enthalten | ✓ | ✗ | Selten |
| CSS statt SMIL | ✓ | Unterschiedlich | ✓ |
| Keine Animationssoftware nötig | ✓ | ✗ | ✗ |
| Datei bleibt auf Ihrem Gerät | ✓ | ✓ | ✗ |
Der SVG-Animator umhüllt standardmäßig jede Animation mit einer Reduced-Motion-Abfrage, was der Barrierefreiheitsschritt ist, den handgeschriebene SVG-Animation fast immer auslässt.