URL in das SVG-Element einfügen

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Classic und TinyMCE – ist so fein!"
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.

Alternatives PNG-Bild
k-images_wolke4

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 …
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 Wegerl-Feld 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="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. 

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:

  1. Den Code <object data=… … …</object> im Text einfügen,
  2. die Datei-URL einfügen und
  3. die Größe bearbeiten.
  4. 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

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

SVG-Element

 


Aktualisiert im Jahr 2023-März