SVG-Text von Zauberhand! – Animation mit Strichen

Bild ABC / Lernen, var. Illustration von geralt

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Mit SVG lassen sich in WordPress Animationen erstellen, die einen handgeschriebenen Effekt erzeugen. Eigentlich ist das ein Simulieren von 'Text'. Diese Technik erfordert anfangs viel Übung und ist eher für kürzere Animationen wie beispielsweise einer SVG-Signatur geeignet. In diesem Beitrag wird beschrieben, wie man diesen Effekt erreichen kann. Beachte jedoch, dass das Erreichen dieses Effekts viel Zeit und Geduld erfordert und dass es wahrscheinlich mehr als nur ein paar Minuten dauern wird. Es ist in diesem Beitrag so gezeigt, welche von Websites hier sehr geholfen haben. – follow me, so für n' Anfang.

Die Wegerl Artikelreihe mit 🧡

Zum Thema SVG-Text animieren

Im folgenden Artikel geht es um die Animation und Simulation von Texten mit SVG, welches eine Fortsetzung des Artikels SVG-Animation in WordPress. – so funktioniert’s ist. Es ist sehr empfehlenswert, den vorherigen Artikel zu lesen, um das Verständnis für die folgenden Themen zu erleichtern, ja zu ermöglichen.

SVG-Animation in WordPress. – so funktioniert’s

Im Folgenden möchte ich einige Websites vorstellen, die bei der Simulation von SVG-Textanimationen sehr hilfreich sein können.

*Der Tippen-Effekt, wie das!

Inhaltsverzeichnis

(1) Schrift wie von Zauberhand

Sehr lehrreich zum elementaren.

SVG – Schrift von Zauberhand

(2) Schrift-Generator

Dieser Schrift-Generator kann sehr nützlich sein, da ist dann auf einfache Handschriften als auf geschwungene zu achten. So für’n Anfang.

www.schriftgenerator.eu

Dort kann eine Schablone heruntergeladen werden, die dann im SVG-Programm nachgezeichnet werden kann.

Es ist am besten, die Vorlage in maximaler Größe herunterzuladen, z. B.:

Alternativ kann man auch die eigene Handschrift auf ein Blatt Papier schreiben und dann fotografieren. Das Bild kann dann im SVG-Editor geöffnet, ausgeschnitten und nachgezeichnet werden.

(3) Vorlage nachzeichnen und SVG erstellen

Diese Methode ist in zwei Teile unterteilt: das Maskieren des SVG und die Erstellung der Sequenzen (Making the layers).

SVG masking und Making the layers

Das Erstellen von Sequenzen erfordert einige diffizile Arbeitsschritte, aber es ist sehr nützlich für anspruchsvollere Animationen. Für eine einfachere Methode wie hier kann man den SVG-Code samt CSS für die Animation automatisch generieren lassen, was hier dann unter Pkt. (4) beschrieben wird. Aber es ist immer ratsam, die Grundlagen zu verstehen, daher erweist sich die oben beschriebene Methode als äußerst nützlich – schließlich bilden die Basics stets das Fundament.

SVG-Editor

Öffne die Vorlage im SVG-Editor.
Wähle das Stiftwerkzeug oder Spline-Drawing-Tool.
Verwende Spline-Drawings wie Linie, Quad Bèzier, Cubic Bèzier oder 'Catmull-Rom'. Die Animationen gelingen am Anfang besser mit Linien. Bei Kurven ist es besser, einen Punkt zu viel als zu wenig zu setzen. (Um die Dateigröße zu reduzieren, empfiehlt sich die Verwendung von SVGOMG, als da zum sparen anfangen). Nach einiger Übung ist es mit dem Spline-Typ 'Catmull-Room' gut möglich, aber eventuell nicht immer gut.
Stelle die Option "Füllen" auf "Keine" ein.
Die Strichbreite hängt von der verwendeten Schriftart ab. Beginne mit einer Strichbreite von 5 Pixeln und wähle die Farbe nach Belieben aus. Beides kann später angepasst werden.
Beginne mit dem Zeichnen! Es empfiehlt sich, die Strichdicke der Buchstaben mittig zu halten.

Die Schrift-Generierung bezieht sich nur auf die Vorlage! – das andere ist Handarbeit.

Mit dem Zeichnen beginnen! – am besten der Buchstaben Strichdicke mittig bleiben.
Das mit dem Nachzeichnen ist folgenden Video von CSS-TRICKS gezeigt. Ich darf hier die Sequenz von CSS-TRICKS vorstellen – ein geübter Zeichner tut sich leichter.
Anschließend kannst du die Striche anpassen. Verwende bei der Option "Line Cap" am besten "Round" für einen runden Abschluss des Striches. Bei "Line Join" kannst du auch "Round" wählen oder eventuell "Bevel" für eine abgeschrägte Verbindung ausprobieren. Experimentiere ein bisschen herum und finde heraus, was am besten zu deinem Schriftzug passt.
Das mit dem 'Cap' so oder so und das mit 'Join' kann Buchstabens auch individuell von Vorteil sein.

Wenn das Ergebnis sowie Strichstärke und Farbe zufriedenstellend sind, kann man das SVG als responsives Format speichern. Denk daran, die Schablone spätestens vor dem Speichern zu entfernen. Anschließend kannst du zum nächsten Schritt übergehen.

(4) SVG-Code samt CSS für die Animation

Hier geht es um die Animation mit dem erstellten SVG und CSS.

SVG ARTISTA

Im Zusammenspiel mit dem Beitrag SVG-Animation in WordPress. – so funktioniert’s ist der folgende Code mit der Sequenz und dem Shortcode anwendbar.

Sequenz zur Animation

Die Zeitabschnitte sind auf SVG ARTISTA nicht separat aufgeteilt – das ist gut, damit das Programm auch für Anfänger geeignet bleibt. Die Sequenzen können im Nachhinein per Handarbeit einfach an das gewünschte Ergebnis angepasst werden. Für gelegentliche Animationen ist das durchaus praktikabel. Die Anmerkung mit den Sequenzen dient hier nur als erste Orientierungshilfe. – so zum ersten Durchblick mal.

Das Beispiel "7. Sequential Animation" von envato-tuts+ ist sehr hilfreich, um die Sequenzen besser zu verstehen.

Bild von 'envato' zur **Sequential Animation**

Im Folgenden unserem Beispiel bleibt der CSS-Code, der auf SVG ARTISTA erstellt wurde, unverändert. Die Sequenzen im CSS können jederzeit angepasst werden.

SVG-Editor und das CSS

Der SVG-Code, der mit SVG ARTISTA erstellt wurde, kann kopiert und in einen SVG-Editor wie z.B. Boxy SVG eingefügt werden. Die Größe des SVGs soll auch später anzupassen sein darum ist beim Speichern darauf zu achten, dass der Viewport auf "responsive" eingestellt ist. Anschließend kann das SVG in das WordPress-Backend hochgeladen werden.

Hier ist des SVG zu sehen, welche Class von SVG ARTISTA hizugefügt wurde.

Der Größe soll das SVG anzupassen sein, darum zum Speichern darauf achten, dass der Viewport auf Responsive seht.

Der CSS-Code von SVG ARTISTA sollte im Customizer oder im Childs Theme in die style.css eingefügt werden. Es ist sinNvoll, eine separate Klasse im CSS zu erstellen und diese Klasse:
- allen @-webkit-keyframes und @keyframes sowie der -webkit-animation und animation beizufügen. In unserem Beispiel wird diese Klasse eva genannt. Für das kleine Beispiel gibt es nur fünf Blöcke, also von .svg-eva-1 bis .svg-eva-5, sowie die Keyframes.

@-webkit-keyframes <span style="background-color: #ccffff;">eva-</span>animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 177.1px;
        stroke-dasharray: 177.1px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 177.1px;
    }
}

@keyframes <span style="background-color: #ccffff;">eva-</span>animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 177.1px;
        stroke-dasharray: 177.1px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 177.1px;
    }
}

.svg-eva-1 {
    -webkit-animation: <span style= "background-color: #ccffff;"
        >eva-</span>animate-svg-stroke-1 0.5s linear 11s both;
    animation: <span style= "background-color: #ccffff;"
        >eva-</span>animate-svg-stroke-1 0.5s linear 11s both;
}

Nochmal der Hinweis: Wenn eine Website mehrere @keyframes-Animationen enthält, sollten separate Klassen erstellt werden, um sicherzustellen, dass sie sich nicht gegenseitig beeinflussen. Wenn sich die Animationen überschneiden, kann dies zu unerwarteten visuellen Effekten führen und die Website unprofessionell wirken lassen. Es ist daher ratsam, sorgfältig zu planen und die CSS-Regeln entsprechend zu organisieren, um eine reibungslose und ansprechende Animationserfahrung auf der Website sicherzustellen.

Das Editieren im Code-Editor

Das Hinzufügen von Selektoren und Attributwerten kann in jedem Code-Editor mit der Suchen- und Ersetzen-Funktion durchgeführt werden – für Mac mit "cmd+f" und für Windows mit "strg+f". Es ist jedoch ratsam, dies in einer separaten, idealerweise leeren Datei durchzuführen, um sicherzustellen, dass nicht alle anderen Animationen im style.css ebenfalls geändert werden.

Im Beispiel sollte nach animate gesucht und durch eva-animate ersetzt werden.

Der Shortcode und das CSS

Anmerkung: Wie eingangs im Beschrieb ist ohne den vorhergehenden Artikel SVG-Animation in WordPress. – so funktioniert’s hier nicht weiterzukommen.

Der Shortcode im Content oder einem Text-Widget:
[insert-svg-code file="Eva-wp" class="eva svg-onscroll svg-refresh-trigger"]
Das SVG lässt sich am besten dann folgendem CSS anpassen.
- Die Positionierung hier der Class .eva und
- die Strichstärke / Farbe hier der Class .eva path, bspw.

/* Positionierung */
.eva {
    max-width: 150px;
    max-height: 50px;
    margin: -10% 70% 15%;
    transform: rotate(-30deg);
} /* Farbe und Strichstärke (ändern) */
.eva path {
    stroke: green !important;
    stroke-width: 9 !important;
}

Es ist möglich, die Selektoren zusammenzufassen, aber es kann von Vorteil sein, sie getrennt zu belassen, um eine bessere Strukturierung des Codes zu gewährleisten. Außerdem hat die Verwendung einer zusätzlichen Klasse ihre Vorteile. Zum Beispiel müssten alle Selektoren für den Pfad auch für alle SVG-EVA-Klassen definiert werden, wie z.B. svg-eva-1, svg-eva-2 usw. Außerdem ist das !important für den Pfad erforderlich, da die Auszeichnung bereits im SVG festgelegt wurde.

Anmerkung zum !important. Es sollte beachtet werden, dass das Verwenden von !important im Allgemeinen vermieden werden sollte, es sei denn, es ist unbedingt erforderlich. Es ist besser, die Spezifität der Selektoren zu erhöhen, um Konflikte mit anderen Stilen zu vermeiden.

Denkbarer Workflow

Was das Programm SVG ARTISTA für uns arbeitet, das geht aus folgenden Artikel im Titel Animieren Sie Ihre eigene SVG-Signatur hervor. Mit dabei ist der Tipp "4. All the Other SVG Attributes". Da geht es dann, um häufig verwendete Attribute zu entfernen und diese stattdessen im CSS einfügen.

Bitte, wenn’s gefällt, aber von muss-sein ist das nicht! Denn mit von SVG ARTISTA generierten SVG sind durch die Classen auch das CSS ansprechbar.

Das SVG im Nachhinein anpassen

Bspw folgende Attribute style="stroke-width: 10px; stroke: rgb(214, 42, 42);.

Hier dem Beispiel ist das mit dem Selector svg-eva-1 gezeigt. Der Machart im Nachhinein ist dann das !important bedingend.

.svg-eva-1 path {
    stroke-width: 5 !important;
    stroke: rgb(214, 42, 42) !important;
}

Anders für so ohne !important würden dem SVG die Attribute wegzumachen sein und das CSS ist dann Bedingung, bspw:

.svg-size3 path {
    stroke: green !important;
    stroke-width: 9 !important;
}
.svg-sybille-1 {
    width: 150px !important;
    max-height: 50px;
    margin: -10% 70% 15%;
    transform: rotate(-30deg);
}

Weiter von Beispiele den Suchmaschinen in Begriffen "dashoffset svg animation" oder "svg handschrift animation", da ist unter Bilder noch mehr zu finden.

Und weil es nun gut läuft, nochmal …

So in etwa der Einstellung auf SVG ARTISTA:

Der element class eigenen Namen zuweisen, animation type: Animation und für Handschrift SVG …

… der Staffelschritt (stagger step) höher ist als die Animationsdauer (animation duration).

Beitragsbild animieren

In WordPress wird das Titelbild normalerweise im Editor festgelegt. Somit ist nicht möglich, das Titelbild oder Beitragsbild direkt zu animieren, da die Animationen über einen Shortcode eingefügt werden. Um eine Animation als Titelbild einzufügen, muss dies über die functions.php-Datei unter Verwendung der Beitrag-ID und des entsprechenden Shortcodes erfolgen. Im folgenden Beispiel sind mehrere Animationen aufgeführt, und weitere die erstellt werden können.

Es ist zu beachten, dass diese Methode nur funktioniert, wenn dem Beitrag ein Bild als Platzhalter zugewiesen wird. Vorzugsweise dasselbe oder ähnliches, denn bspw. in den Embeds wird nur das Bild wiedergegeben, welches im Editor definiert ist. Ohne ein Beitragsbild wird das Bild, das über den Shortcode eingefügt wird, nicht visuell angezeigt. Die Funktion ersetzt lediglich das vorhandene Beitragsbild durch das SVG-Bild aus dem Shortcode.

Theme functions.php

function replace_post_thumbnail_with_svg($html, $post_id, $post_thumbnail_id, $size, $attr) {
    if ($post_id == 123) {
        $svg_shortcode = 'SVG file not found: /users/wegerl/www/wordpress/wp-content/themes/twentyfourteen-child/images/kulisse-1.svg';
        $svg_image = do_shortcode($svg_shortcode);
        $html = '<div class="post-thumbnail">' . $svg_image . '</div>';
    }

    if ($post_id == 456) {
        $svg_shortcode = 'SVG file not found: /users/wegerl/www/wordpress/wp-content/themes/twentyfourteen-child/images/kulisse-2.svg';
        $svg_image = do_shortcode($svg_shortcode);
        $html = '<div class="post-thumbnail">' . $svg_image . '</div>';
    }

    // Weitere Bedingungen und Animationen hinzufügen

    return $html;
}
add_filter('post_thumbnail_html', 'replace_post_thumbnail_with_svg', 10, 5);

Dieser Code ersetzt das Platzhalterbild oder jedes andere Bild durch die entsprechende Animation, wenn die Beitrag-ID übereinstimmt. Du kannst weitere Bedingungen und Animationen hinzufügen, indem du den Code entsprechend anpasst.

Bitte beachte, dass du die Beitrag-IDs und Shortcodes in diesem Beispiel entsprechend deinen eigenen Anforderungen zu ändern sind.

Am unteren Rand der SVG-Animation wird sich möglicherweise so schmaler Rand abzeichnen, das wiederum durch CSS aufzulösen ist, z. B.:

.post-thumbnail .svg-elefant-1 svg,
.post-thumbnail .svg-kulisse-1 svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

Ein Anfang ist’s und das zur Nachlese …

Es gibt viele weitere Tools im Web, aber diese erfordern eine separate Einarbeitung und scheinen für Profis ausgelegt zu sein. Ein besonders bekanntes Tool ist https://www.svgator.com/. Meiner Meinung nach ist es sehr komplex und eher für fortgeschrittene Anwender interessant.