Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Man kann URLs direkt in das SVG-Element einfügen, um es interaktiv zu gestalten. Zum Beispiel können Sie auch einfach SVG-Icon erstellen und es mit einem Link verknüpfen, der den Benutzer zu einer anderen Seite oder einem anderen Abschnitt der Website führt. Wie das alles hier gemeint ist, folge hier dem Beitrag.
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, und in diesem Beitrag zeigen wir Ihnen, wie es geht.
Es geht also um die Verwendung von SVGs mit Links. Um das SVG derart auf der Website anzuzeigen, kann das Object-Tag verwendet werden.
Zum Beispiel: Angenommen, du hast ein Dashboard mit vielen Einstellungen auf deinem Web-Host-Server und bist am Anfang deiner Karriere. In diesem Fall ist eine gute Information sehr gefragt! Lass uns genauer betrachten, was damit gemeint ist.
↑ Klicke oben links auf die grau hinterlegten Begriffe, um eine Beschreibung für den Benutzer zu erhalten. Wenn du auf die Icons klickst, gelangst du direkt zu den Informationen in der Gebrauchsanweisung. Wenn du auf den Link klickst, öffnet sich die verlinkte Website im Bild und du kannst scrollen. Um zum Überblickbild zurückzukehren, musst du die Seite neu laden, daher gibt es auch den 'Reload'-Button. Oder du kannst die Links mit einem Rechtsklick öffnen, um die Website in einem neuen Tab zu öffnen. So funktioniert es in diesem Beispiel
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
Im Object-Tag wird das SVG-Element mit verlinkten Icons eingefügt.
- Zunächst möchte ich Ihnen die Webseite 'Sieben Wege, SVG in HTML-Seiten' vorstellen, auf der Sieben Wege beschrieben werden, wie Sie SVGs in HTML-Seiten einbinden können.
Ein Beispiel von 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 Sie einen Rechtsklick verwenden. Wenn Sie direkt auf die Links klicken, öffnen sich diese in einem Scrollbereich. Es funktionieren hier jedoch nicht mehr alle Links auf dieser Webseite 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
OT: Das SVG ist fast 450 kB …
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="600" height="300"><!-- Für Browser ohne SVG-Unterstützung --><img src="https://..Jitsi-Meet.png" width="600" height="300" 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="600" height="300"><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.
- 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
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 funktioniert das, mit dem Plug-in Easy FancyBox.
Ja! – und wie von selbst funktioniert 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. Allerdings funktionieren 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.
Aktualisiert im Jahr 2023-März
Wird geladen ...