Eine SVG-Animation

Demo - das ist das Ziel

Was ist SVG?

Wir bauen in diesem Beispiel eine schicke Animation mit Hilfe von SVG und CSS, aber schau Dir erst mal an, was SVG-Grafiken eigentlich sind. Eine gute Einführung in das Thema SVG findest Du auf W3Schools. Wer sich lieber eine kurze und knappe Einführung in das Thema SVG auf deutsch als Video anschauen möchte, der findet ein kleines Tutorial von Morpheus unter: https://www.youtube.com/watch?v=CR4ZDwlIBtw. Hier baut er in einer HTML-Datei einfache geometrische Formen per SVG.
Unter https://wiki.selfhtml.org/wiki/SVG gibt es eine weitergehende Einführung in das Thema SVG. Um die Syntax von SVG zu verstehen, solltest Du einige Befehle kennen, wie Pfade in SVG gezeichnet werden: „m“ zum Beispiel steht für move (bewege den Cursor an diese Stelle) oder „d“ steht für Data. Mehr zu diesen Befehlen findest unter https://wiki.selfhtml.org/wiki/SVG/Elemente/Pfade.

Du weißt jetzt, was SVG-Grafiken generell sind? Okay, dann kann es ja losgehen mit der Animation …

SVG animieren

Um die oben abgebildete Logo-Animation zu erstellen musst Du erst mal die Schrift in Inksacape, Affinity Designer, Figma, Adobe-Illustrator oder einer anderen Vektorgrafik-Software bauen. In meinem Beispiel habe ich in Inkscape die Roboto Heavy mit einer Schriftgröße von 38pt gewählt. Danach speichert man am besten das Original unter einem neuen Namen, da jetzt die Schrift in Pfade umgewandelt wird und die Gruppierungen der Pfade (mehrmals) aufgehoben werden. In Inkscape kannst Du Dir im XML-Editor (mit strg - Umschalt - x aufrufen) das Resultat ansehen. Kleiner Tipp: in Inksacape solltest Du die Dokumenteneinstellungen nicht ändern, ansonsten hat Inksacape ein Problem damit den Nullpunkt für die Pfade richtig zu setzen.
Dann kannst Du die SVG-Datei in einem Texteditor öffnen und bereinigen; lösche Stil-Angaben, IDs und anderen nicht notwendigen Code siehe Datei „Sweet - A4, in Pfade umgewandelt, bereinigt.svg“.
Den Code für die Pfade (das Element d=“ … ) kannst Du Dir jetzt kopieren und in eine HTML-Datei einfügen.

Der Trick, um die Grafik zu animieren sind nun die CSS-Eigenschaften stroke-dasharray und stroke-dashoffset für die SVG-Linien in Verbindung mit einer Keyframeanimation. Wir nutzen hier tatsächlich nur SVG und CSS; JavaScript oder irgendwelche Bibliotheken braucht man für die Animation nicht. Unter https://css-tricks.com/almanac/properties/s/stroke-dashoffset/ steht, wie Du mit den beiden Eigenschaften generell eine Animation bauen kannst. Und unter https://www.youtube.com/watch?v=vJNVramny9k findest Du eine Tutorial von Dev Ed, in dem Schritt für Schritt erklärt wird, wie die oben stehende Typo-Animation erstellt wird. Details zum benötigten CSS und HTML für die oben stehende Animation findest Du im Quellcode dieser HTML-Datei

Literaturhinweise

Das Thema Einbinden von fertigen SVG-Grafiken hatten wir bereits in der Aufgabe Superburschi (Aufgabe-28-SVG.html) behandelt.

Eine etwas einfachere SVG-Animation mit hover-Effekt auf einem Button gibt es ebenfalls in dieser Sweets for my Sweet-Aufgabe (im Ordner Sweets for my sweet/Material/Einfache svg-animation auf Button/dist/index.html).

Auf W3Schools könnt Ihr die SVG-Grundlagen noch mal nachlesen: https://www.w3schools.com/graphics/svg_intro.asp

Eine Bibliothek zum Animieren von SVG-Grafiken findet Ihr auf SVG.js: https://svgjs.com/docs/3.0/ und https://codepen.io/collection/XpwMLO/

Mehr schöne (auch animierte) SVG-Beispiele findest Du auf Codepen: https://codepen.io/search/pens?q=svg+animation oder Charts mit SVG: https://gionkunz.github.io/chartist-js/

SVG aufräumen geht mit https://jakearchibald.github.io/svgomg/

Ein Tool, um eine SVG-Animation automatisch erstellen zu lassen findest Du auf http://lazylinepainter.info/

SVG-Filter: https://codepen.io/atelierbram/pen/JlLnH und https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content

Weitere Tools zum Erstellen von SVG-Grafiken: https://www.svgator.com/, Inkscape, Affinity Designer, Figma, Figma vs Sketch vs Adobe XD

Eine Alternative zu SVG wäre: Canvas