SVG-Text von Zauberhand! – Animation mit Strichen

Hinweis: In diesem Beitrag sind die Funktionen, die zur Demonstration auf Wegerl.at verwendet werden, nicht enthalten.

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.[smart]

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.

(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 wichtig, die Grundlagen zu verstehen, deshalb ist die oben beschriebene Methode sehr hilfreich. – weil die Basic sind immer das wichtigste.

SVG-Editor

1. Öffne die Vorlage im SVG-Editor.
2. Wähle das Stiftwerkzeug oder Spline-Drawing-Tool.
3. 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.
4. Stelle die Option „Füllen“ auf „Keine“ ein.
5. 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.
6. Beginne mit dem Zeichnen! Es empfiehlt sich, die Strichdicke der Buchstaben mittig zu halten.

   Das mit dem Nachzeichnen ist folgenden Video von CSS-TRICKS gezeigt. Ich darf hier die Sequenz von CSS-TRICKS wiederholen:

   Das im Video ist mit Spline-Drawing von Typ ‚Catmull-Rom‘. – ein geübter Zeichner tut sich leichter.

7. 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.

   

Wenn das Ergebnis sowie Strichstärke und Farbe zufriedenstellend sind, kann man das SVG als responsives Format speichern. Es ist wichtig daran zu denken, die Schablone spätestens vor dem Speichern zu entfernen. Danach kann man 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.

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

1. 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.

2. 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 eva-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 177.1px;
    stroke-dasharray: 177.1px;
  }

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

@keyframes eva-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: eva-animate-svg-stroke-1 0.5s linear 11s both;
          animation: eva-animate-svg-stroke-1 0.5s linear 11s both;
}

Nochmal der Hinweis: wenn eine Website mehrere @keyframes-Animationen enthält, ist es wichtig, separate Klassen für jede Animation zu erstellen, um sicherzustellen, dass sie sich nicht überschneiden. 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.

1. Der Shortcode im Content oder einem Text-Widget:
   [[insert-svg-code file="Eva-wp" class="eva svg-onscroll svg-refresh-trigger"]]
2. 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 notwendig, da es im SVG selbst bereits definiert ist.

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.

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

.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);
}

Und weil’s nun so lustig ist …

[insert-svg-code file=“Sybille-wp“ class=“svg-sybille-1 svg-size3 svg-onscroll svg-refresh-trigger“]

[insert-svg-code file=“Eva-wp-3″ class=“svg-eva-1 svg-size3 svg-onscroll svg-refresh-trigger“]

So in etwa der Einstellung auf SVG ARTISTA:

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 wichtig 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.

function replace_post_thumbnail_with_svg($html, $post_id, $post_thumbnail_id, $size, $attr) {
    if ($post_id == 123) {
        $svg_shortcode = '[insert-svg-code file="kulisse-1" class="svg-kulisse-1 svg-onscroll svg-refresh-trigger"]';
        $svg_image = do_shortcode($svg_shortcode);
        $html = '<div class="post-thumbnail">' . $svg_image . '</div>';
    }

    if ($post_id == 456) {
        $svg_shortcode = '[insert-svg-code file="kulisse-2" class="svg-kulisse-2 svg-onscroll svg-refresh-trigger"]';
        $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 …

• Boxy SVG – Text in Pfad umwandeln
• Pfad von Google Font zu SVG
• Fortgeschritten: Der i-Punkt ist’s

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.