Beitragsbild mit der Aufschrift Animationen erstellen.
8. Dezember 2023 25. März 2025
Reading Time: 5 minutes
,

SVG Animationen erstellen

Um animierte Logos oder Animationen für Webseiten oder andere Anwendungen zu erstellen, müssen Sie keine teure Anwendung auf dem PC oder Mac installieren. Auch für die Erstellung von Vektorgrafiken benötigen Sie keine kostenpflichtige Software oder komplexe Open Source Lösungen.

Mit Expressive Animator und Expressive Canvas (bald verfügbar) erstellen Sie die Grafiken bequem im Browser. Sie müssen nichts installieren, sondern rufen einfach die Expressive-Website auf. Die Arbeit mit den Anwendungen ist auch offline möglich, Sie benötigen also keine permanente Internetverbindung. Expressive Animator ist bereits einsatzbereit, das Vektorgrafik-Tool Expressive Canvas steht kurz vor der Fertigstellung.

Erstellen von Animationen mit Expressive Animator auf verschiedenen Plattformen

Wenn Sie den Expressive Animator starten, können Sie auf allen relevanten Plattformen sofort loslegen. Sie können die Webapp unter Windows, Linux, macOS und ChromeOS verwenden. Für einen ersten Eindruck können Sie die Software 14 Tage lang kostenlos testen. Für die Testperiode müssen Sie keine Kreditkarte hinterlegen, das Testabonnement läuft automatisch aus, wenn Sie es nicht durch ein kostenpflichtiges Abonnement ersetzen.

Screenshot der Expressive App, es steht geschrieben: trial ends in 14 days.
Expressive Animator kann 14 Tage lang kostenlos und ohne Angabe einer Kreditkartennummer getestet werden.

Wenn Sie die Software nach der Testphase weiterverwenden möchten, können Sie entweder eine monatliche Lizenz für 15 US-Dollar pro Monat (18 Euro inkl. MwSt.) erwerben oder die Software für ein Jahr für 150 US-Dollar abonnieren. In diesem Fall erhalten Sie zwei Monate gratis. Das Abonnement kann jederzeit gekündigt werden, so dass Sie die Apps sehr flexibel nutzen können. 

Die Lizenz beinhaltet die Werkzeuge zur Erstellung von Vektorgrafiken, den Editor für Animationen und weitere Werkzeuge. Die erstellten Grafiken und Animationen können in gängige Formate exportiert werden. Dazu gehören SVG, MP4 oder Webm. Sie können auch animierte GIF-Dateien und PNG-Grafiken erstellen.

In wenigen Schritten zur ersten Animation oder Grafik

Nachdem Sie die Website von Expressive aufgerufen haben, können Sie über die Schaltfläche „Start animating“ sofort loslegen. Anschließend melden Sie sich im Fenster mit Ihren Benutzerdaten an oder klicken auf „Start free trial“, um die 14-tägige Testphase zu starten. Im nächsten Fenster geben Sie Ihre E-Mail-Adresse ein. An diese schickt Ihnen Expressive einen Code für die Anmeldung. Im Fenster müssen Sie dann nur noch Ihre Adresse eingeben und können anschließend mit der Testphase beginnen. 

Wichtig ist, dass Sie sich Ihren Lizenzschlüssel merken. Er steht oben links in kleiner Schrift unterhalb des Preises. Während der Testphase müssen Sie nichts bezahlen, der angezeigte Preis gilt, wenn Sie nach der Testphase ein Abonnement abschließen. Sie können sich anschließend auf der Anmeldeseite für Expressive Animator mit Ihrer E-Mail-Adresse und dem Lizenzschlüssel anmelden und mit „Aktivieren“ und „Test fortsetzen“ Ihre Testphase starten.

Danach können Sie ein neues Projekt starten oder eine auf Ihrem PC gespeicherte Datei eines vorhandenen Projektes laden. Für die Anmeldung benötigen Sie jeweils Ihre E-Mail-Adresse und die Lizenznummer. Über den Link „Manage your subscription“ können Sie Ihr Abonnement verwalten und die Lizenznummer abfragen.

Screenshot von der Expressive App. Zu sehen ist eine Vektorgrafik-basierte Animation einer Fahrradfahrerin.
Nachdem Sie sich in Expressive Animator eingeloggt haben, können Sie im Browser mit der Erstellung oder Bearbeitung Ihrer Animation beginnen.

Grundsätzlich bietet Expressive Animator alle Möglichkeiten, die auch andere Programme in diesem Bereich bieten. Die einzelnen Funktionen finden Sie auf der Übersichtsseite von Expressive Animator. Die Bearbeitungswerkzeuge befinden sich im linken Bereich des Fensters und darunter. Im unteren Teil des Fensters können Sie die Animation starten und den Ablauf steuern.

Die Zeitleiste im unteren Bereich ist ein sehr effektives Werkzeug zur Steuerung der Animation. Auf der rechten Seite können Sie die einzelnen Objekte bearbeiten. Im oberen Teil des Fensters finden Sie auch Einstellungsmöglichkeiten für die Ansicht. Mit den Icons rechts oben können Sie zwischen der Bearbeitung der Grafik und der Animation umschalten und die verschiedenen Ebenen der Animation in Echtzeit per Drag & Drop verschieben. Wenn Sie eine durchgeführte Aktion rückgängig machen oder wiederholen möchten, können Sie dies über die beiden Schaltflächen oben links tun. 

Angenehm ist die Unterstützung der rechten Maustaste innerhalb der Webanwendung. Damit können Sie genauso effektiv und flexibel arbeiten wie in herkömmlichen Anwendungen für Windows, Linux und macOS. Auch das Mausrad wird unterstützt. Drehen Sie es, um in die Animation hinein- oder herauszuzoomen. Wenn Sie die STRG- oder Befehlstaste gedrückt halten, zoomt Expressive Animator die Grafik an die Position des Mauszeigers. Auch das Trackpad von macOS wird von Expressive Animator voll unterstützt. Sie können mit dem Trackpad schwenken, scrollen und mit Keyframes arbeiten. 

Speichern und Exportieren von Grafiken und Animationen

Über das Hamburger-Menü in der linken oberen Ecke haben Sie Zugriff auf einige wichtige Verwaltungsoptionen. Über „Öffnen“ können Sie ein bestehendes Projekt aus einer auf Ihrem PC gespeicherten Datei in die Anwendung laden, so haben Sie jederzeit die Kontrolle über Ihre eigenen Dateien, da diese nicht in der Cloud liegen.  Auch das Speichern erfolgt über diesen Bereich, ebenso wie das Exportieren und Importieren von Grafiken. Unter „License Info“ sehen Sie, wie lange Ihre aktuelle Lizenz noch gültig ist. 

Wenn Sie den Export einer Datei starten, können Sie in diesem Fenster auswählen, in welchem Format und mit welchen Einstellungen der Export erfolgen soll. Außerdem können Sie festlegen, wann die Animation starten soll. 

Export Settings in der Expressive App.
Dateien in Expressive Animator exportieren.

Mit der Schaltfläche „Export“ starten Sie den Vorgang auf Ihrem PC. Auch hier behalten Sie die volle Kontrolle über Ihre Daten. Neben dem Export können Sie auch Grafiken in die Animation importieren. Auch hier stehen zahlreiche Dateiformate zur Verfügung, zum Beispie JPG, ECF, SVG, AI, PDF, PNG, EPS und einige mehr.

Link zu Expressive Animator

Download-Link der Beispiel-Animationen für Expressive Animator (zip-Datei, 71 kB). Nur für Privat-Nutzung vorgesehen, alle Rechte vorbehalten.

Wie hilfreich fanden Sie diese Seite? Schreiben Sie Kritik und Anregungen auch gerne in die Kommentare!

Durchschnittliche Bewertung 4.8 / 5. Anzahl Bewertungen: 1333

2 Antworten zu „SVG Animationen erstellen“

  1. Avatar von Jens
    Jens

    Von einem Beitrag „SVG Animationen erstellen“ erwarte ich eigentlich eine mehr oder weniger detaillierte Anleitung, wie ich SVG-Animationen erstelle und nicht eine ausführliche Erklärung, wie man ein Abo für eine Web-Äpp abschließt und welche persönliche Daten man wo eingeben muss.

    Und trotz der Erläuterung „Grundsätzlich bietet Expressive Animator alle Möglichkeiten, die auch andere Programme in diesem Bereich bieten“ weiß ich jetzt immer noch nicht, wie ich eine SVG-Animation erstellen kann 🙁

  2. Avatar von Jens
    Jens

    Von einem Beitrag „SVG Animationen erstellen“ erwarte ich eigentlich eine mehr oder weniger detaillierte Anleitung, wie ich SVG-Animationen erstelle und nicht eine ausführliche Erklärung, wie man ein Abo für eine Web-Äpp abschließt und welche persönliche Daten man wo eingeben muss.

    Und trotz der Erläuterung „Grundsätzlich bietet Expressive Animator alle Möglichkeiten, die auch andere Programme in diesem Bereich bieten“ weiß ich jetzt immer noch nicht, wie ich eine SVG-Animation erstellen kann 🙁

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Geschäftsausstattung - Beitragsbild

Visitenkarte, Briefpapier & Co. 📩: Professionelle Geschäftsausstattung als Teil Ihrer Marke

Sie glauben, Geschäftsausstattung sei ein Relikt aus der Vor-Digital-Zeit? Dann unterschätzen Sie, wie kraftvoll ein Stück Papier wirken kann. Visitenkarte, Briefpapier & Co. entscheiden oft früher über Vertrauen als jede Website. Und genau deshalb sollten Sie…
Weiterlesen → Visitenkarte, Briefpapier & Co. 📩: Professionelle Geschäftsausstattung als Teil Ihrer Marke

Dr. Web Newsletter

Zum Newsletter anmelden

Kommen Sie wie über 6.000 andere Abonnenten in den Genuss des Dr. Web Newsletters. Als Dankeschön für Ihre Anmeldung erhalten Sie das große Dr. Web Icon-Set: 970 Icons im SVG-Format – kostenlos.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an kontakt@drweb.de
„✓ Bitte prüfen Sie Ihr Postfach und bestätigen Sie Ihre Anmeldung.“
Das große Dr. Web Icon-Set mit über 970 individuell anpassbaren Icons im SVG Format.