SVG-Animation in WordPress. – so funktioniert’s

Hinweis: In diesem Beitrag sind die Funktionen, die zur Demonstration auf Wegerl.at verwendet werden, nicht enthalten! – daher hier Teilweise gestörte Visualisierungen.

Die Einbindung von SVG-Animationen in WordPress-Inhalte ist dank der Website ‚SVG ARTISTA‘ und einem minimalistischen Plug-in von Jackie D’Elia keine Zauberei. Mithilfe von JavaScript von WP-Freund kann die Animation so gesteuert werden, dass sie erst im Viewport abgespielt wird, wenn der Besucher sie auf dem Bildschirm hat. Dadurch wird sichergestellt, dass die Animation nicht vorzeitig abgespielt wird und die Benutzererfahrung verbessert wird. Mithilfe von Shortcodes können diese Animationen einfach in den Inhalt integriert werden. Dies ist besonders nützlich für kleinere Animationen, um die Website aufzupeppen, ohne aufwendige Designs zu benötigen. Mit ein wenig Mühe ist die Einbindung schnell erledigt und kann zu einer erfolgreichen Gestaltung einer ansprechenden Website beitragen!

[smart]

SVG-Animation.
Das Beispiel und die Anleitung

So Smart!

[insert-svg-code file=“Elipse-hand-7″ class=“svg-elem-1 svg-size svg-onscroll svg-refresh-trigger“]

(1) Das Plug-in zur SVG-Animation

Den Grundlegenden Beschrieb zum folgenden Plug-ins zur Einbindung von SVG-Animationen findet man hier:

Um die oben genannte Website im separaten Browsertab zu öffnen, klick Verwenden von SVG-Animation in WordPress.

Die Einbindung von SVG-Animationen in WordPress-Inhalte ist dank des Plug-ins von Jackie D’Elia nun einfacher denn je. Das Plug-in kann direkt von GitHub heruntergeladen werden. Hier ist der Link zum Download des Plug-ins:

• Das Plug-in auf GitHub, JDD-SVG-Support.

1. Dort auf GitHub rechts oben „Code“ anklicken,
2. ‚ZIP-Archiv herunterladen‘ und
3. öffne bitte das WP-Dashboard und gehe zu Plugins > Installieren > „Plugin hochladen“. Lade die ZIP-Datei hoch und klicke auf „Installieren“. Sobald die Installation abgeschlossen ist, aktiviere das Plugin. Das Plugin ist nun einsatzbereit und so sind bald SVG-Animationen in deine WordPress-Inhalte einzubinden.

   

Ein guter Tipp für dich ist, dich an den Anweisungen in der README.md-Datei des Plugins zu orientieren. Wenn du diesen Schritten folgst, sollte dann die Einbindung von SVG-Animationen problemlos klappen.

Die README.md

add_filter( 'shortcode_atts_insert-svg-code', 'update_svg_defaults', 10, 4);
function update_svg_defaults( $merge_attributes, $defaults, $attributes, $shortcode ) {

$defaults['path'] = ' << insert your absolute path to folder with trailing slash >> ';

$merge_attributes = array_merge( $defaults, $attributes );

return $merge_attributes;
}

Es ist von Vorteil, wenn bereits ein Childs-Theme vorhanden ist, da im Childs-Theme nur der Ordner „image“ erstellt werden muss. Mithilfe von FTP können die SVG-Dateien, die für die Animation vorgesehen sind, in diesen Ordner geladen werden – so ist das Plugin programmiert. Befolge einfach diese Schritte und du solltest in der Lage sein, SVG-Animationen in WordPress einzubinden.

Beispiel von Shortcode:

[[insert-svg-code file="Name der SVG-Datei" class="svg-elem-1"]]

Ein Beispiel für den Shortcode lautet: file="Name der SVG-Datei". Das SVG-Bild, das sich im image-Ordner des Child-Themes befindet, wird durch diesen Shortcode referenziert. Die class="svg-elem-1" bezieht sich auf das CSS, das die Animation betreffen soll. Beachte diese Hinweise und du kannst problemlos SVG-Animationen in WordPress integrieren.

(2) Die SVG-Sequenz und das CSS zur Animation

Sobald das SVG-Bild bspw. in ‚Boxy SVG‚ erstellt wurde, ist die Website SVG ARTISTA relevant. Folge einfach diesem

• Online-Tool SVG ARTISTA.

1. Lade das SVG-Bild auf das Online-Tool SVG ARTISTA hoch.
2. Wähle den Animationstyp auf ‚Animation‘ und konfiguriere die anderen Einstellungen nach Bedarf.

   

3. Klicke dann auf den Button “</>GET CODE” in der Headerleiste, um den Code zu erhalten. Kopiere den CSS-Code und füge ihn im Customizer oder im Childs-Theme ein, wie ich es hier zeige.

   

Beispiel der Animation „Glückliche Besuche“  w. o.:

/****** Animation "Glückliche Besuche"
* Generated by SVG Artista
* MIT license (https://opensource.org/licenses/MIT)
* Web https://svgartista.net
******/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 319.5417785644531px;
    stroke-dasharray: 319.5417785644531px;
  }

  100% {
    stroke-dashoffset: 639.0835571289062px;
    stroke-dasharray: 319.5417785644531px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 319.5417785644531px;
    stroke-dasharray: 319.5417785644531px;
  }

  100% {
    stroke-dashoffset: 639.0835571289062px;
    stroke-dasharray: 319.5417785644531px;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s both;
          animation: animate-svg-stroke-1 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1s both;
}

/*Extra Class: für größe und zentriert*/
.svg-size {
width: 375px;
height: 375px;
margin: 5% auto -35%;
}

Beispiel von Shortcode:

Shortcode mit der Class svg-elem-1 und der Extra Class svg-size:

[[insert-svg-code file="Name der SVG-Datei" class="svg-elem-1 svg-size"]]

[codesnippets]

(3) Die SVG-Animation im Sichtbereich laden

Um die SVG-Animation erst im Sichtbereich zu laden, ist etwas JavaScript erforderlich. Dies ist nicht ganz einfach, aber machbar.  Folge den Schritten sorgfältig und du solltest in der Lage sein, die SVG-Animationen nur im Sichtbereich zu laden.

(function ($) {

    $(function() {

        var scrollSvgClass = '.svg-onscroll'; // in eine beliebige css klasse ämndern, aber den . nicht vergessen
        var onlyOnce = true; // false, wenn das SVG immer neu geladen werden soll, wenn es im sichtbereich ist

        // Prüft ob ein Element im Sichtbereich ist
        $.fn.isVisible = function (offset = 0) {
            if (!$(this).length) {
                return true;
            }

            var elementTop = $(this).offset().top + offset;
            var elementBottom = elementTop + $(this).outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();
            return elementBottom > viewportTop && elementTop < viewportBottom;
        };

        // Wandelt etwas in XML um, damit man es neuladen kann
        $.fn.xml = function() {
            return (new XMLSerializer()).serializeToString(this[0]);
        };
        
        // Lädt den Inhalt neu, indem es erst in xml umwandelt und dann das xml ersetzt
        $.fn.DOMRefresh = function() {
            return $($(this.xml()).replaceAll(this));
        };

        // Durchläuft alle '.svg-onscroll', prüft ob sie im Sichtbereich sind und lädt sie neu.
        $(scrollSvgClass).each(function() {
            var element = $(this);
            var loaded = false;

            if (element.isVisible() && loaded === false) {
                element.DOMRefresh();
                loaded = onlyOnce; // nur einmal aktualisieren
            }

            $(window).on('scroll', function () {
                if (element.isVisible() && loaded === false) {
                    element.DOMRefresh();
                    loaded = onlyOnce; // nur einmal aktualisieren
                }
            });
        });

        // Ermöglicht es einem Link mit der CSS-Klasse svg-refresh-trigger
        // alle SVGs neuzuladen, wenn sie im Sichtbereich sind (ohne Scroll)
        $(document).on('click', '.svg-refresh-trigger', function (e) {
            e.preventDefault();

            $(scrollSvgClass).each(function() {
                var element = $(this);
                var loaded = false;
    
                if (element.isVisible() && loaded === false) {
                    element.DOMRefresh();
                    loaded = onlyOnce; // nur einmal aktualisieren
                }
            });
        });
    });

})(jQuery);

[kevin]

• Im Shortcode ist dann die Klasse svg-onscroll mit anzugeben. So wird das SVG neu geladen, wenn es im Sichtbereich ist.

Beispiel von Shortcode:

Shortcode wie gehabt und der Class svg-onscroll weiter der Option von svg-refresh-trigger.

[[insert-svg-code file="Name der SVG-Datei" class="svg-elem-1 svg-size svg-onscroll svg-refresh-trigger"]]

Die Animation über Button neu laden

Einem Button oder Link kann man die Klasse svg-refresh-trigger mitgeben. So wird im Anklicke des SVGs alles was im Sichtbereich ist noch einmal geladen, also ohne die Seite neu zuladen.

Beispiel

Animation neu laden

Mit Button:

<p style="margin-top: 25px; text-align: center;"><button class="svg-refresh-trigger">Animation neu laden</button></p>

… oder in Link die class:

<a class="svg-refresh-trigger">Animation neu laden</a>

SVG-Animation mit 3 Elementen

Eine SVG-Animation mit drei Elementen zu erstellen, erfordert mehr Aufwand, da jedes einzelne Element nacheinander aufgerufen werden muss.

• Dazu muss das SVG-Bild bzw. der SVG-Code von ‚SVG ARTISTA‘ kopiert werden. Beispiels mit ‚Boxy SVG‘, das dort im Abschnitt Elements ist das unterhalb gezeigt. Die vollständige Kopie von ‚SVG ARTISTA‘ muss dort eingefügt werden.

Das links wirkt wie von Hand gezeichnet und hier rechts ist das nur willkürliche Animation.

Des Beispiels der SVG-Code:

Auf ‚SVG ARTISTA‘ ist der Einstellung darauf zu achten:

1. 1. • Der element class eigenen Namen zuweisen,
      • animation type: Animation und für solches SVG
      • der Staffelschritt (stagger step) höher ist als die Animationsdauer (animation duration).

Nochmals, nach den Einstellungen ist wieder über den Button in der Headerleiste der SVG-CODE zu kopieren und bspw. in ‚Boxy SVG‘ einzufügen. Also die SVG-Kopie von ‚SVG ARTISTA‘ im gesamten dort eintragen und abspeichern.

Siehe auch unterhalb in Elements. Der hier grau hinterlegt Bereich ist der neue SVG-Code von ‚SVG ARTISTA‘. Das welches der path von oberhalb ist somit zu löschen. Oder den kopierten SVG-Code gleich in eine neue Datei eintragen.

Bspw. folgendes der Änderung: Die Classen wie class="svg-pfeil-1"sind von ‚SVG ARTISTA‘ generiert.

Teil von SVG-Codes wie in 'Boxy SVG' erstellt:

<path d="M 48.819 142.459 C 143.701 165.676 247.787 163.746 338.819 60.306" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;"></path>
<path d="M 347.374 46.431 L 275.31 67.57" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 2.178984, -10.831111)"></path>
<path d="M 347.563 47.873 L 339.442 119.982" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 3.138328, -11.937108)"></path>

Teil von SVG-Code nach 'SVG ARTISTA':

<path d="M 48.819 142.459 C 143.701 165.676 247.787 163.746 338.819 60.306" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" class="svg-pfeil-1"></path>
<path d="M 347.374 46.431 L 275.31 67.57" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 2.178984, -10.831111)" class="svg-pfeil-2"></path>
<path d="M 347.563 47.873 L 339.442 119.982" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 3.138328, -11.937108)" class="svg-pfeil-3"></path>

Anmerkung: Die Classen wären auch direkt in ‚Boxy SVG‘ einfügbar, aber gegen Fehler ist man mit der direkten Kopie gewappnet.

Des Beispiels das CSS für die SVG-Animation:

Das wär dann für nur eine Animation auf der Website in Kopie wie gehabt im Customizer oder Child-Themes einzutragen.

Wenn der Website des mehr von Animationen in Anwendung sind, dann ist der nächst Animation die Kopie nachzuarbeiten.

Erstens:

1. 1. • die @-webkit-keyframes animate-svg-stroke-1 und @keyframes animate-svg-stroke-1 sind
      • in @-webkit-keyframes pfeil-animate-svg-stroke-1 und @keyframes pfeil-animate-svg-stroke-1 zu editieren.

Dasselbe sind dem Animationscode allen @-webkit-keyframes und @keyframes zu editieren. In diesem Beispiel des Pfeils sind das nur der dreien Paare.

Zweitens:

1. 1. • Der Selektoren wie .svg-pfeil-1 {
-webkit-animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}sind die Deklarationen anzupassen.

Selbstredend allen hier drei Selektoren den Deklarationen gleich.

Das CSS für die SVG-Animation mit dem Pfeil

Von wegen wurden von mir die Attriputwerte bis auf zwei Kommastellen reduziert.

/****** Animation "Pfeil"
* Generated by SVG Artista
* MIT license (https://opensource.org/licenses/MIT)
* Web https://svgartista.net
******/
@-webkit-keyframes pfeil-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 321.55px;
    stroke-dasharray: 321.55px;
  }

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

@keyframes pfeil-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 321.55px;
    stroke-dasharray: 321.55px;
  }

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

.svg-pfeil-1 {
  -webkit-animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes pfeil-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 77.10px;
    stroke-dasharray: 77.10px;
  }

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

@keyframes pfeil-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 77.10px;
    stroke-dasharray: 77.10px;
  }

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

.svg-pfeil-2 {
  -webkit-animation: pfeil-animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.12s both;
          animation: pfeil-animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.12s both;
}

@-webkit-keyframes pfeil-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 74.56px;
    stroke-dasharray: 74.56px;
  }

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

@keyframes pfeil-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 74.56px;
    stroke-dasharray: 74.56px;
  }

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

.svg-pfeil-3 {
  -webkit-animation: pfeil-animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.24s both;
          animation: pfeil-animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.24s both;
		  }

In Fortsetzung siehe:

SVG-Text von Zauberhand! – Animation mit Strichen

Mit Danksagung an WP-Freund für den Code „Die SVG-Animation im Sichtbereich laden“ und Jackie D’Elia für das hervorragende Plug-in.

[insert-svg-code file=“Jackie-D-Elia-raeder“ class=“cog-wheels svg-elem-2a“]