Mein Kampf mit der Verwendung und Animation eines konischen Farbverlaufs in SVG

Das wunderbare Unternehmen, für das ich arbeite, Payoneer, hat ein neues Logo, und meine Aufgabe war es, **es nachzubilden und zu animieren** für eine Ladekomponente in unserer App. Ich werde genau erklären, wie ich das gemacht habe, welche Probleme ich hatte und wie ich zu der Lösung gekommen bin. Und als Bonus schauen wir uns die Animation an!

Aber zuerst fragen sich wahrscheinlich einige von Ihnen ... *Nachbilden? Warum?*

Die Branding-Agentur, die unser Logo entworfen hat, hat uns einen vollständigen Satz von Assets geschickt, kategorisiert nach Themen. Sie kamen in allen Größen und in jedem verfügbaren Format. Wir hatten alles, einschließlich SVGs, für das Logo und die Ladeanimation. Aber wir konnten sie nicht verwenden.

Hier ist warum. Werfen wir einen Blick auf das Logo

Das Logo ist ein Ring mit einem konischen Farbverlauf, der aus fünf Farben besteht, und ... das ist alles. Das Problem ist, dass SVG (noch) keine abgewinkelten Farbverläufe unterstützt, daher benötigen wir beim Exportieren eines Designs mit einem konischen Farbverlauf eine Art Hack, um das gewünschte Ergebnis zu erzielen.

Nun, ich bin kein Experte, wenn es um Vektorgrafiksoftware geht, daher gibt es vielleicht einen anderen (und vielleicht besseren) Weg, dies zu tun, aber ich weiß, dass der gängigste Weg, konische Farbverläufe nach SVG zu exportieren, darin besteht, das Farbverlaufelement in ein Bild umzuwandeln und dieses Bild als Base64-String in das SVG einzufügen. Das ist auch das, was wir von der Branding-Agentur bekommen haben, und ich vertraue darauf, dass sie wissen, wie man ein SVG am besten exportiert.

Da die endgültige SVG-Datei nun einen PNG-Base64-String enthält, sprang die Dateigröße auf fast 1 MB an, was vielleicht keine Katastrophe ist, aber deutlich höher ist als die 2 KB, die es sein sollten. Multiplizieren Sie diesen Unterschied mit drei Themen (kein Text, heller Text und dunkler Text), und wir sprechen von 3 MB Bildern statt von 3 KB Code. Das ist ein großer Unterschied, also haben wir beschlossen, das Logo mit SVG neu zu erstellen.

Aber wie?!

Obwohl CSS konische Farbverläufe vollständig unterstützt, tut dies SVG nicht. Die erste Frage, die ich mir stellte, war also, wie man einen konischen Farbverlauf in SVG erstellt. Eigentlich habe ich Google gefragt. Und was ich fand, waren viele coole, einzigartige, kreative Wege, um konische Farbverläufe zu SVG hinzuzufügen, die meisten davon basieren auf einer Art clip-path-Implementierung. Ich habe zuerst einen kurzen <path> erstellt, der die Form des Rings darstellt, und ihn als clip-path auf ein einfaches <rect>-Element angewendet.

Als Nächstes musste ich das <rect> mit konischen Farbverläufen füllen, aber zuerst musste ich alle richtigen Farbstopps finden, um das Aussehen nachzubilden. Das dauerte eine Weile, aber nach viel Feintuning erzielte ich ein Ergebnis, mit dem ich zufrieden bin

div.gradient {
  background-image: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%);
}

Der letzte Schritt war, das <rect> durch etwas anderes zu ersetzen, das konische Farbverläufe unterstützt, und der einfachste Weg, den ich gefunden habe, ist die Verwendung eines SVG <foreignObject>-Elements mit einem regulären <div> darin und einem conic-gradient als background-image. Dann musste ich nur noch den clip-path auf das <foreignObject>-Element setzen, und das war's.

So habe ich einen konischen Farbverlauf in einem SVG verwendet, um das Design vollständig vektorisiert und skalierbar zu halten, mit weniger als 20 Codezeilen und weniger als 2 KB Dateigröße.

Aber das war der einfache Teil. Sprechen wir jetzt über Animation.

Der Lader

Unsere App zeigt jedes Mal eine Ladeanimation an, wenn sich ein Benutzer anmeldet. Wir hatten dafür eine GIF-Datei verwendet, aber ich hatte seit Monaten vor, sie auf eine reine CSS/SVG-Animation zu aktualisieren. Die Vorteile liegen auf der Hand: Schnellere Darstellung bedeutet eine nahtlosere Ladeerfahrung, und eine kleinere Dateigröße bedeutet noch schnelleres Laden. Wir bekommen einfach mehr für weniger, was besonders ideal für eine Ladeanimation ist.

Hier ist die Animation, die ich anstrebte

Diese Art von Animation ist mit SVG tatsächlich ziemlich einfach. Alles, was wir wirklich brauchen, ist ein Trick mit stroke-dasharray und stroke-dashoffset. Das war mein Ausgangspunkt. Ich habe einen neuen <path> in der Mitte des Rings erstellt, fill entfernt, einen stroke mit der richtigen stroke-width hinzugefügt und dann an der Animation gearbeitet.

Es brauchte einiges an Herumspielen, um die Bewegung genau so hinzubekommen, wie die Designer es wollten. Ich habe am Ende sogar zwei Animationen verwendet: Eine steuert den stroke-dashoffset, und die zweite rotiert den gesamten <path> um eine volle Umdrehung.

Da die clip-path-Eigenschaft jedoch auf den fill der Form verweist, bedeutete die Animation des Strichs, dass ich eines von zwei Problemen lösen musste: Entweder konnte ich eine andere Methode finden, um die Bewegung zu animieren, oder eine andere Methode, um die Farben zum Strich hinzuzufügen.

Also ging ich zurück zu Google und all den kreativen Ideen, die ich vorher gefunden hatte, aber die meisten davon waren so gut wie nicht animierbar, also begann ich nach einer guten Methode ohne clip-path zu suchen, um Farben zum Strich hinzuzufügen. Ich habe mir ein paar "Out-of-the-box"-Lösungen angesehen, Maskierung ausprobiert und bin bei der einfachsten perfekten Lösung gelandet

.logoBlend {
  mix-blend-mode: lighten;
}

Ein lighten-Mischmodus betrachtet die RGB-Farben jedes Pixels des gerenderten Elements, vergleicht sie mit dem RGB-Wert des darunter liegenden Hintergrundpixels und behält den jeweils höchsten Wert. Das bedeutet, dass die weißen Teile des Elements weiß bleiben und die dunklen Teile die Werte des Hintergrundpixels annehmen.

Indem ich dem schwarzen Pfad ein weißes <rect> hinzugefügt habe, habe ich im Wesentlichen alles blockiert, was dahinter liegt. In der Zwischenzeit ist alles, was hinter dem animierten schwarzen Strich liegt, sichtbar. Das bedeutete, dass ich das <foreignObject> mit dem conic-gradient zurückbringen konnte, es hinter die mix-blend-mode-Schicht legen und ihm eine einfache Rotationsanimation geben konnte, um zum Design zu passen.

Beachten Sie, dass das Endergebnis dieser Methode einen weißen Hintergrund hat und nicht transparent wie das statische Logo, aber damit war ich einverstanden. Wenn Sie möchten, können Sie es umdrehen, einen schwarzen Hintergrund verwenden und die hellen Teile Ihres Elements ausblenden, indem Sie den Mischmodus auf darken einstellen.

Letzte Anpassungen

Zu diesem Zeitpunkt war ich so gut wie fertig und ziemlich zufrieden mit dem Endergebnis. Aber ein paar Tage später erhielt ich von der Branding-Agentur eine Lottie-basierte JSON-Datei mit genau der gleichen Animation. Rückblickend hätte ich meine Arbeit vielleicht sparen und ihre Datei verwenden können, sie wäre einwandfrei funktioniert. Selbst die Dateigröße war überraschend klein, aber immer noch 8x größer als das SVG, also haben wir am Ende trotzdem meine Animation verwendet.

Aber das bedeutete, dass ich noch eine letzte Sache zu tun hatte. Die Lottie-Animation hatte eine "Startanimation", bei der der kleine orangefarbene Punkt sichtbar wird, und ich musste sie auch zu meiner Animation hinzufügen. Ich habe allen drei Animationen eine kurze Verzögerung von 0,5 Sekunden sowie eine Skalierungsanimation am Anfang hinzugefügt.

Klicken Sie auf "Rerun" im Pen, um die Animation erneut vom Anfangspunkt aus zu sehen.

Das ist alles! Jetzt hat mein Unternehmen ein neues Logo und eine Reihe von leichten, voll skalierbaren Assets, die auf unseren Webplattformen verwendet werden können.

Und für diejenigen, die sich fragen: Ja, ich habe eine nette kleine Logo-Komponente in React erstellt, da wir es verwenden. Sie rendert das SVG sogar entsprechend einem als Prop übergebenen Thema, was die Implementierung erleichterert und alle zukünftigen Änderungen an einem Ort behält.

Was ist mit Ihnen?

Glauben Sie, dass es einen besseren Weg gibt, das gleiche Ergebnis zu erzielen? Teilen Sie Ihre Gedanken in den Kommentaren! Und danke fürs Lesen.