Interaktive SVG-Elemente: Die Integration von URLs

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.

URLs können direkt in SVG-Elemente eingefügt werden, um eine interaktive Gestaltung zu ermöglichen. Dies eröffnet die Möglichkeit, SVG-Grafiken mit Links zu verknüpfen, die den Benutzer zu anderen Seiten oder Abschnitten der Website führen. Dies kann beispielsweise genutzt werden, um SVG-Icons zu erstellen, die beim Klicken auf sie den Benutzer zu spezifischen Produkten oder Dienstleistungen weiterleiten. Die Verknüpfung von URLs mit SVG-Elementen ist eine einfache und unkomplizierte Methode, die in diesem Beitrag genauer erläutert wird.

Inhaltsverzeichnis

SVG-Grafiken interaktiv

Eine Möglichkeit, SVG-Grafiken interaktiver zu gestalten, besteht darin, sie mit URLs zu verknüpfen. Indem man eine URL direkt in das SVG-Element einfügt, kann man es mit einem Link versehen, der den Benutzer zu einer anderen Seite oder einem anderen Abschnitt der Website führt. So können beispielsweise SVG-Icons erstellt werden, die beim Klicken auf sie den Benutzer zu einem bestimmten Produkt oder einer bestimmten Dienstleistung führen.

Die Verknüpfung von URLs mit SVG-Elementen ist einfach und unkompliziert.

Zum Beispiel könnte dies bei einem Dashboard mit vielen Einstellungen auf einem Web-Host-Server hilfreich sein, insbesondere für jemanden, der am Anfang seiner Karriere steht. In solchen Fällen ist es äußerst wertvoll, über relevante Informationen zu verfügen. In diesem Beitrag werden wir genauer betrachten, was damit gemeint ist.

↑ Klicke oben links auf die grau hinterlegten Begriffe, um eine Beschreibung für den Benutzer zu erhalten.

Durch Klicken auf die Icons gelangt man direkt zu den entsprechenden Informationen in der Gebrauchsanweisung. Ein Klick auf den Link öffnet die verlinkte Website im Bild, wodurch man nach unten scrollen kann. Um zum Überblicksbild zurückzukehren, ist es erforderlich, die Seite neu zu laden. Dafür steht der 'Reload'-Button zur Verfügung. Alternativ können die Links mit einem Rechtsklick geöffnet werden, um die Website in einem neuen Tab zu öffnen. Dieses Beispiel zeigt, wie es funktioniert.

Jetzt gehen wir weiter mit unserem Beispiel zur Erstellung des SVGs mit Links. Zunächst wird das Dashboard als Bildschirmfoto im PNG-Format verwendet. Anschließend wird das PNG-Bild im SVG-Programm geöffnet. Die Punkte und Icons des Dashboards sind der Mittelpunkt des SVGs. Diese werden dann mit einem Rechteck mit einer Opazität von null verlinkt. Wenn alles fertig ist, wird das SVG im Ganzen als SVG-Format abgespeichert.

WordPress und SVG-Element

Das SVG-Element wird im Object-Tag mit verlinkten Icons eingefügt.

Eine nützliche Ressource ist die Webseite Sieben Wege, SVG in HTML-Seiten, auf der verschiedene Methoden beschrieben werden, wie SVGs in HTML-Seiten integriert werden können.

Hier ist ein Beispiel für ein SVG-Element:

<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="blue"/>
</svg>

Ein Beispiel für eine Vektorgrafik mit verlinkten Icons ist nun folgend dargestellt. Um die Links zu öffnen, können wir einen Rechtsklick verwenden. Wenn direkt auf die Links geklickt wird, öffnen sich diese in einem Scrollbereich. Es funktionieren jedoch nicht mehr alle Links auf diese Weise:

Um das SVG-Bild größer zu sehen, klicke hier darauf oder öffne es in einem neuen Tab, indem du mit der rechten Maustaste darauf klickst und 'Link in neuem Tab öffnen' auswählst.

Allerdings funktionieren dem SVG nicht alle Links, da manche Websites das Öffnen in einem neuen Tab nicht (mehr) zulassen. In diesem Fall kann man mit einem Rechtsklick auf den Link gehen und "Link/Bild in neuem Tab öffnen" wählen.

OT: Das SVG ist fast 450 kB …

Das SVG-Bild ist 450 kB groß (500 x 390 Pixel) und entsprechend aufwendig. Wenn man es auf 1000 x 780 Pixel vergrößert und in ein PNG umwandelt und optimiert, ist es nur noch 47 kB groß. Trotzdem ist die Schärfe des PNGs im Vergleich zum SVG nicht so gut. Um sicherzustellen, dass das PNG-Bild in der gleichen Größe wie das SVG scharf ist, muss das SVG mindestens 1500 Pixel breit sein, bevor es in ein PNG umgewandelt wird. Wenn das PNG-Bild noch größer ist, wird es auch in Bezug auf die Dateigröße ähnlich aufwendig wie das SVG. Daher kann man sich diese zusätzliche Arbeit sparen

Bei den Headerbildern auf 'WP Wegerl' wird das PNG- oder JPEG-Bild zunächst zugeschnitten und dann durch Kompression optimiert. Anschließend wird das Bild im Boxy SVG geöffnet und möglicherweise mit einem SVG-Logo abgespeichert. Das gesamte Bild wird dann als SVG konvertiert, was zu einer Dateigröße von etwa 120 bis 180 KB führt.

Bei dem Logo geht es darum, den Brennpunkt der Schärfe des Emblems und der Schrift zu erhalten. Allerdings kann das Headerbild mit einer Größe von etwa 120 KB von einigen Browsern nicht schnell genug geladen werden. Das aktuelle SVG Header-Banner hat nur eine Größe von 9 KB.

Die mit Boxy SVG erstellten Bilder und Icons sind so konfiguriert, dass sie in einem neuen Tab geöffnet werden sollten. Dies funktioniert jedoch weder in WordPress noch in ClassicPress, unabhängig davon, ob die Website mit https oder http läuft.

Es ist außerdem zu beachten, dass bei direktem Anklicken des SVG, z. B. bei der Ente mit Sprechblase, WordPress die Verbindung ablehnt. Der Link sollte stattdessen zu einem Plug-in führen. Wenn das SVG-Bild jedoch aus der Mediathek (s. oben … groß im neuen Browser-Tab) heraus angeklickt wird, spielt es keine Rolle, ob der Link im selben Browser-Tab oder in einem neuen geöffnet wird.

Das Gleiche gilt dort für den Klick auf den Globus, der entweder zum Amazon-Link oder zum 'WordPress Reparatur'-Link auf Youtube führt. Bei einem Test mit dem Theme Twenty Seventeen auf MAMP (http://localhost:8888/…) funktionierten die Links target='_blank' vom SVG nur mit dem Safe SVG-Plugin damals der Version 1.9.8.

Das SVG-Element im Object-Tag

Dieser Code zur Anwendung:

<object data="https://..Jitsi-Meet_noopener.svg" type="image/svg+xml" width="730" height="365"><!-- Für Browser ohne SVG-Unterstützung --><img src="https://..Jitsi-Meet.png" width="730" height="365" alt="Alternatives PNG-Bild" /></object>

Sonderbares Verhalten des Codes, nachdem beispielsweise die Größe des SVGs geändert und der Modus von 'Text' auf 'Visuell' umgestellt wurde. Wird der Code aktualisiert oder ergänzt?

<object data="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet_noopener.svg" type="image/svg+xml" width="730" height="365"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><!-- Für Browser ohne SVG-Unterstützung --><img src="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet.png" width="600" height="300" alt="Alternatives PNG-Bild" /></object>

… Das ist sehr eigenartig! Manchmal tritt dies auch erst nach der Änderung der Größe des SVG auf und so weiter.

Diese oben beschriebene automatische Einfügung ist keine Infektion durch Malware oder ein betrügerisches Skript oder Plugin: https://stackoverflow.com/questions/58466078/how-to-get-rid-of-this-weird-piece-of-code-automatically-added-to-my-content
Hier der Autor von Tiny MCE vor Jahren https://core.trac.wordpress.org/ticket/44275#comment:3
- Dies ist das "Lesezeichen", das automatisch eingefügt wird, um die Cursorposition beim Umschalten von Visual › Text oder Text › Visual im klassischen Editor beizubehalten.
- Wenn beim Umschalten Text › Visual etwas falsch erscheint, versuchen Sie auf jeden Fall, irgendwo anders in den Text zu klicken, um den Cursor zu bewegen. Dadurch wird sichergestellt, dass der Code zum Beibehalten der Cursorposition andere Editor-Funktionen nicht beeinträchtigt.

Die automatische Einfügung, die oben beschrieben wurde, ist also kein Anzeichen für eine Infektion durch Malware oder ein betrügerisches Skript oder Plug-in. Laut dem Autor von TinyMCE vor Jahren (siehe Link), handelt es sich dabei um ein "Lesezeichen", das eingefügt wird, um die Cursorposition beim Umschalten zwischen Visual- und Text-Modus im klassischen Editor beizubehalten. Wenn beim Umschalten vom Text- in den Visual-Modus Probleme auftreten, sollte man versuchen, an einer anderen Stelle im Text zu klicken, um den Cursor zu bewegen. Dadurch wird sichergestellt, dass der Code zum Beibehalten der Cursorposition andere Editor-Funktionen nicht beeinträchtigt. – gut-zu-wissen!

Der Code bleibt wie eingegeben:

Den Code <object data=… … …</object> im Text einfügen,
die Datei-URL einfügen und
die Größe bearbeiten.
Dann den Cursor aus dem <object data=… … …</object>-Bereich herausklicken, indem man in den Absatz ober- oder unterhalb klickt und auf den visuellen Editor umschaltet.

Als nächstes folgt ein Beispiel mit dem Plug-in SVG Support.

Das SVG-Bild im 'img-Tag'

Das Beispiel ist hier nicht verfügbar, da es nicht funktioniert. Das hat jedoch nichts direkt mit dem Plug-in zu tun. Stattdessen geht es um die Verwendung von SVG-Dateien mit bestimmten Einstellungen.

Mit dem Plug-in SVG Support und der Einstellung 'Enable Advanced Mode' (ja) kann man SVG-Dateien in WordPress verwenden. Man kann den Code für eine SVG-Datei wie folgt eingeben:

<img class="style-svg" alt="alternativer Text" src="quelle-der-datei.svg" />

Wenn man auf die verlinkten Icons klickt, öffnen sie sich nicht in einem neuen Fenster. Dies liegt daran, dass die Links nicht als target="_blank" definiert sind.

Außerdem fiel auf, dass das zweite SVG mit den verlinkten Icons nach dem Veröffentlichen nicht funktionierte. Aus diesem Grund habe ich das Beispiel folgend so eingefügt, anklicke, öffnet das in neuem Tab:

→ Seitenbeitrag.

Das mit der Größe vom SVG

Die Größe kann im Modus 'Visuell' durch Ziehen angepasst werden. Alternativ kann auch eine Klasse erstellt werden, z.B.:

.logo-class {
width: 50%;
}

Das mit den margins

Das mit den margin und der Position ist wie bei normalen img-Bildern.

Wie auch immer …

Die Zusammenfassung ist, dass am MAMP allein mit Plug-in Safe SVG oder SVG Support das mit dem Link target="_blank" funktioniert.

Und wie von selbst …

Und wie von selbst funktionierte das, mit dem Plug-in Easy FancyBox.

Ja! – und wie von selbst funktionierte es auch mit dem Plug-in Easy FancyBox. Das Bild wird einfach durch "Dateien hinzufügen" im visuellen Editor hinzugefügt und dann mit einem Link zur Mediendatei versehen.

Nach dem Anklicken des folgenden SVG-Bildes öffnet sich die Lightbox von Easy FancyBox und von dort aus können die Verlinkungen angeklickt werden.

Das Beispiel folgend ist nicht mehr, da hier der Website 'Easy Fancy Box' nicht aktiviert ist. Anklicke, öffnet das Bild direkt aus der Mediendatei und von da aus sind die Bilderlinks anklickbar.