Viele dieser Antworten werden auch in dieser verwandten Frage zum Animieren von Illustrationen für das Web veröffentlicht.

Vermeiden Sie SMIL-Animationen

Sara Soueidan, wahrscheinlich die beste Animatorin von SVGs im Internet, schrieb: „Ich weiß, dass ich den Leitfaden für SMIL-Animationen geschrieben habe , aber angesichts ihrer Zukunft verwende ich sie persönlich nicht mehr.“ Das sollten Sie auch nicht.

SMIL-Animationen funktionieren in keinem IE, Edge, einigen mobilen Browsern und werden nach und nach von Chrome/Opera entfernt (obwohl das Chrome-Team kürzlich sagte, dass diese Verwerfung vorübergehend ausgesetzt wird ). Sie sollten es zu 99 % der Zeit vermeiden, sie zu verwenden.

Verwenden Sie CSS für sehr einfache Animationen

SVG kann größtenteils mit reinem CSS animiert werden (einschließlich der Verwendung von :hoverZuständen, transforms, transitions und animations). Es ist geplant, vollständige CSS-Animationsunterstützung zu erhalten, aber derzeit werden nur einige unterstützt und können bei Cross-Browser-Problemen fehlerhaft sein.

Laut Sara Soueidan eignet sich CSS hervorragend zum Animieren von SVGs, bevorzugt jedoch JS, da es hilft, diese Cross-Browser-Probleme zu lösen. Verwenden Sie es daher, wenn Sie können, aber greifen Sie auf JS zurück, wenn die Animationen komplexer sind oder nicht browserübergreifend funktionieren.

Verwenden Sie JavaScript-Animationen, wenn CSS nicht funktioniert

Meistens können SVGs mit ein wenig JavaScript animiert werden, ohne dass eine JavaScript-Animationsbibliothek erforderlich ist. Das Animieren in JS bietet viel mehr Cross-Browser-Unterstützung und ist mit etwas grundlegendem Verständnis ziemlich einfach zu verwenden.

Für komplexe Animationen, die die Verwendung einer Zeitleiste oder ähnlichem erfordern, kann die Verwendung einer Bibliothek wie GSAP sehr hilfreich sein. Es gibt unzählige andere SVG-Animationsbibliotheken, Snap.svg ist eine weitere große, aber die meisten handhaben Animationen nicht annähernd so einfach oder so leistungsfähig wie GSAP.

Bei bestimmten Arten von Animationen kann die Verwendung eines bestimmten JS-Plugins wie MorphSVG von GSAP Ihnen einiges an Zeit sparen, da sie sich um die Cross-Browser-Probleme und alle Berechnungen kümmern. Die meisten Animationen benötigen jedoch keine Plugins wie dieses. Weitere Informationen finden Sie unter „Ein Leitfaden für Alternativen zu SMIL-Funktionen“ .

Es ist auch akzeptabel, Polyfills für SMIL zu verwenden, aber ich bin müde, dies zu tun, da sie nicht sehr weit verbreitet/getestet sind. Davon abgesehen sind Eric Willigers und FakeSmile die beiden häufigsten.

Werkzeuge

Die einzige Software, auf die ich gestoßen bin, die nach SVG+JS exportiert, ist ein Adobe After Effects-Plugin namens Lottie (ehemals Bodymovin), eine Flash-Erweiterung namens Flash 2 SVG und ein kleines Online-Tool namens SVG Circus . Abgesehen davon exportieren Software-Animatoren wie Adobe Edge Animate, Adobe Animate CC oder Animatron in SMIL-Animationen, die nicht verwendet werden sollten. Daher ist es am besten, einen Entwickler SVG+CSS- oder SVG+JS-Animationen mit exportierten SVGs aus einem Editor erstellen zu lassen . Inkscape hat eine großartige Ressource , die Tutorials und Beispiele dazu verlinkt.

Ich bin mir sicher, dass in Zukunft mehr Animationssoftware den Export nach SVG+JS unterstützen wird.

Einige andere wichtige Anmerkungen

• Es ist wichtig, die Leistung im Auge zu behalten . Sara Drasner hat einige Leistungsbenchmarks für SVG erstellt , die zeigen, dass Sie sich nach Möglichkeit für hardwarebeschleunigte CSS-Animationen entscheiden sollten, aber auf einen guten JavaScript-Ansatz zurückgreifen sollten, wenn dies nicht möglich ist.

• Es ist am besten, SVGs in einem <object>Tag zu verwenden oder direkt in ein <svg>XML-Element einzubetten, wenn es interaktiv ist, und als Hintergrundbild, wenn es nicht interaktiv ist, aber es gibt auch andere Möglichkeiten, dies zu tun .

Für einen umfassenderen Überblick über Webanimationen lesen Sie Rachel Nabors Post auf A List Part . Für einige zusätzliche Vorschläge zu Werkzeugen ist dieser Beitrag sehr hilfreich, obwohl ich nicht mit allen Meinungen einverstanden bin, insbesondere mit der Darstellung von SMIL-Animationen.

Ich habe immer festgestellt, dass es ein großer Schmerz bei der WRT-Unterstützung / -Wartung ist, sich auf etwas anderes als JS-Bibliotheken zu verlassen.

Ich habe immer D3.js verwendet . Es wurde ursprünglich entwickelt, um interaktive SVG/DOM-Elemente aus Datensätzen zu erstellen. Sie können jedoch SVG/DOM ändern, das in einer Seite enthalten ist, solange JS Zugriff darauf hat.

Ich habe in einer Vielzahl von Projekten verwendet, um SVG/DOM zu erstellen/animieren. Einige Beispiele umfassen weiche Echtzeit-Dashboards, Kartenvisualisierungen, DOM-Transformationen und die Erstellung von SVG-Dateien zur Einbindung in PDFs. Ich habe es auch überall im Internet gesehen. Die Website enthält eine Reihe von Beispielen und Links zu Seiten, die sie verwendet haben.

Ich empfehle es, weil es ziemlich browserübergreifend kompatibel ist, eine aktive Community hat und leicht zu erlernen ist. Werfen Sie einen Blick auf die Webseite und achten Sie auf die Verwendung in der realen Welt, um eine kleine Auswahl dessen zu sehen, was Sie damit machen können.

Im Folgenden sind die Möglichkeiten zum Animieren von SVG aufgeführt:

SVG LÄCHELN ANIMATIONEN

Das SVG kann über seine leistungsstarke native Markup-Sprache namens SMIL animiert werden, die direkt aus Animationstools wie dem Adobe Animate CC+flash2svg-Plug-in exportiert wird.

Um ein SVG mit SMIL auch auf Browsern ohne Unterstützung zu animieren, müssen Sie nur ein SMIL-Polyfill verwenden.

Ein Polyfill ist ein spezieller JavaScript-Code, der Funktionen unterstützt, die in einem Browser fehlen, und die ursprüngliche Codierung in eine übersetzt, die der Browser verstehen kann.

Das SMIL-Polyfill von Eric Willigers macht genau das: Es übersetzt SMIL in eine Web-Animations-API, die sogar der Microsoft-Browser unterstützt. Es ist so effizient, dass die Google Chrome-Entwickler beschlossen, die native SMIL-Unterstützung einzustellen und sich auf Webanimationen zu konzentrieren, und Eric Willigers polyfill die Aufgabe überließen, SMIL-Dateien in Chrome abzuspielen.

Jemand hat dies fälschlicherweise als Ablehnung von SMIL durch Chrome interpretiert und die Entwickler für diese Wahl kritisiert. Aber es war keine echte Abwertung, sondern nur eine Verlagerung der Aufgabe, SMIL auf einer Polyfill-Ebene zu interpretieren.

Tatsächlich zitierten die Chrome-Entwickler selbst das Willigers-Polyfill in der sehr offiziellen Ankündigung über ihre Absicht, SMIL abzulehnen.

Wenn Sie also im Internet über den Niedergang von SMIL lesen, machen Sie sich keine Sorgen. Der „Tod“ von SMIL wurde stark übertrieben. Es ist eher wie eine Wiedergeburt.

Um SMIL auf allen Browsern, einschließlich IE und EDGE, zu verwenden, müssen Sie nur diese Javascript-Polyfüllung zu Ihrer Webseite hinzufügen:

https://github.com/ericwilligers/svg-animation

Hier ist eine Demoseite mit Polyfill von Tom Byrne, dem Autor des beliebten Flash2svg-Exporters:

die Seite ohne Polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

und die gleiche Seite mit dem Polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Wenn man sich die Quelle anschaut, ist es ziemlich selbsterklärend.

Auch die Leistungen mit Polyfill sind oft besser als die der ursprünglichen SMIL, da Web Animations auf vielen Browsern hardwarebeschleunigt ist, während SMIL dies normalerweise nicht ist.

ANIMATIONEN IN SVG SMIL EXPORTIEREN

Der einfachere Weg, SVG-Animationen zu erstellen, besteht darin, Tools wie Adobe Animate CC zu verwenden, um sie zu zeichnen, und Plugins wie Flash2svg ( https://github.com/TomByrne/Flash2Svg ), um sie in SVG zu exportieren. Damit können Sie fast alle Animationen + Ton als einzelne SVG-Datei exportieren, wie diese Cartoon-Folge:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG-ANIMATION JS-BIBLIOTHEKEN

Der Javascript-Weg ist komplizierter. Zunächst einmal müssen Sie ein Javascript-Programmierer sein. Dann müssen Sie zwischen vielen Bibliotheken wählen. Die beliebtesten sind:

• SnapSVG http://snapsvg.io
  Diese Bibliothek ist der Nachfolger der alten und beliebten Raphael-Animationsbibliothek, die vom selben Autor erstellt wurde. Sehr stabil, aber es konvertiert SVG zur Laufzeit in ein internes Format, um es zu animieren. Morphing-Optionen sind ebenfalls sehr einfach, nur lineare Interpolation. (HINWEIS: Es gibt auch ein snap.svg-Plugin für Adobe Animate CC, aber die exportierten Dateien sind aufgebläht. Der Exporter erzeugt einen Snap-Svg-Befehl für jeden Frame der Animation, nicht für jeden Keyframe, wodurch eine 18-KB-Svg-Datei mit über 1000 Zeilen erstellt wird Code, nur um ein einfaches Rechteck um 360 Grad zu drehen. Das Flash2svg-Plugin ist viel effizienter, nur ein Befehl und wenige Bytes, um die gleiche Aufgabe zu erledigen).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Eine voll funktionsfähige Morphing-Bibliothek, die es ermöglicht, SVG einfach zu animieren, ohne sie in ein internes Format konvertieren zu müssen. Erstellen Sie einfach 3-4 SVG-Keyframes in Inkscape und die Greenock SVGMorphing-Bibliothek interpoliert automatisch zwischen den Frames und erstellt alle Zwischenframes für eine reibungslose Wiedergabe. Hier ist ein Beispiel:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Wenn Sie in 3D animieren möchten, ist diese Bibliothek sehr leistungsfähig.
  Seen.js rendert 3D-.obj-Dateinetze in SVG und animiert sie sehr einfach.

SVG-BILDER EDITOREN

Was die Tools betrifft, können Sie die Animations-Keyframes hauptsächlich mit drei Softwares erstellen:

• Inkscape: Open Source, hat unzählige Funktionen, es ist ein fortschrittliches Vektorbearbeitungspaket, das von Leuten entwickelt wurde, die an der SVG-Arbeitsgruppe teilnehmen. Die Referenz für das SVG-Format. Nicht leicht zu lernen.

• Adobe Illustrator: Kommerzielle, sehr leistungsfähige Vektorzeichensoftware, bietet viele Funktionen, die von SVG noch nicht unterstützt werden, hat aber auch die schlechteste Kompatibilität mit dem Format. Oft müssen Sie die exportierte SVG-Datei manuell bearbeiten, um das Illustrator-Chaos zu beheben. Aber es ist sehr beliebt in der Kunsthochschule, und alle Grafiker wissen, wie man es benutzt.

• Affinity Designer: Dies ist eine kommerzielle Software wie Illustrator, aber mit einer hervorragenden SVG-Kompatibilität, fast auf dem Niveau von Inkscape. Die Benutzeroberfläche ist viel benutzerfreundlicher und erfreut sich jetzt bei SVG-Künstlern großer Beliebtheit.

SVG-ANIMATION-EDITOREN

Derzeit ist der einzige SVG-Animationseditor dieser:

• Adobe Animate CC: Das frühere Adobe Flash Pro wurde von Adobe komplett neu geschrieben, um von den inzwischen veralteten Flash-Animationen zu den modernen SVG-Animationen zu migrieren. Sie können die resultierenden SVG-Animationen zusammen mit einer benutzerdefinierten Javascript-Bibliothek exportieren oder mit Plugins wie „flash2svg“ in SVG+SMIL speichern. Diese letzte Option ist sehr effizient, ich verwende sie immer anstelle des aufgeblähten nativen Exporters.

Sie können das kostenlose Plugin hier herunterladen: https://github.com/TomByrne/Flash2Svg

Oder installieren Sie es über das Adobe Plugins-Panel: https://creative.adobe.com/addons/products/7232

Leider ist Adobe Animate CC kommerziell. Es gibt kostenlose alternative Open-Source-Animationsanwendungen, aber ich habe sie alle ausprobiert und sie sind meiner Meinung nach immer noch scheiße. Hoffen wir auf die Zukunft.

Referenzen:
Mein ausführlicherer Blogbeitrag zu diesem Thema: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

Der Fall, auf den über snap.svg verwiesen wird: https://stackoverflow.com/questions/35727635/adobe-animate-snap-svg-plugin-huge-files