Object-Tag SVG …
Die Icons mit Links und so

Info echo

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

Info echo

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

Info echo

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

Info echo

… 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

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

Info echo

Ansprechend! – so gehts hier zum Progress
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

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

Info echo

Werkraum ist Werkraum und Frontend ist Frontend
Illustraion SVG unDraw; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Das SVG ist zum Beispiel mit Icons und diese sind verlinkt. Das ist durch Objekt-Tag wiederzugeben und ist gar nicht nur so als Spielerei. Bspw die Beschreibung von einem Dashboard, das mit vielerlei Einstellungen ist. Nehmen wir mal an, das Dashboard auf deinem Web-Host-Server und du stehst ganz am Anfang deiner Karriere. Da ist doch eine gute Info sehr gefragt! – lass dir zeigen, wie das gemeint ist.


Anklicke da oben die linkerseits und grau hinterlegten Begriffe. Da gehts so bspw zur Gebrauchsanweisung. Anklicke, so öffnet die verlinkte Website im Bild und ist dann zum Scrollen. Um wieder zurück des Bilds der Übersicht ist die Seite hier neu zu laden, darum ist hier auch der ‘Reload’ Button. Oder passender die Links mit Rechtsklick und somit ist die Website in neuem Tab zu öffnen.

So nun weiter im Bspw zur Herstellung des SVG mit den Links. Im erstens ist die Vorlage das Dashboard als Bildschirmfoto.png. Infolge ist das im SVG-Programm zu öffnen. Des Dashboards als PNG-Bild sind dort die Punkte und die Icons der Mittelpunkt. Diese sind so mit einem Rechteck Opazität null zu verlinken. Zur Fertigstellung ist das im Ganzen als SVG-Format abzuspeichern. … Dann ist das als Beschreibung für den Benutzer. Und durch Anklicken der Icons geht es gleich zur Info…

WordPress und SVG

Im object-Tag das SVG mit verlinkten Icons

So Vektorgrafik wie hier bspw. Da sind auch Icons mit Links dabei. Diese sind dann mit Rechtsklick zu öffnen. Im direkten anklicke der Links öffnen sich diese in einem Scroller.

Alternatives PNG-Bild
k-images_wolke4

Das SVG-Bild größer  → Anklicke oder in Groß so mit Rechtsklick und ‘Link in neuem Tab öffnen’. Dieser Spielart (Anklicke) dann das von Light-Box ist das unterhalb der Überschrift “Und wie von selbst…” nochmal im Beschrieb

OT: Das SVG ist fast 450 kB …
Das SVG ist 450 kB (500 px mal 390 px), da solcherart SVG sehr aufwendig ist. … Dessen auf 1000 x 780 vergrößert und in PNG konvertiert und optimiert sind es nur 47 kB. Und selbst in der Größe des PNG ist das dann von wegen der Schärfe vs. SVG nicht. Damit dem PNG-Bild als groß die Schärfe so in etwa passt, da sollte das SVG die breite so um die 1500 px haben. So ist das dann in PNG zu konvertieren. Sollte das PNG noch viel größer sein, so kommt von wegen der kB dasselbe wie SVG. Also derlei sparen kann man sich schenken.
Bspw anders ist das hier mit den Headerbildern auf Wegerl. Da wird hier das PNG-Bild oder JPEG-Bild erst zugeschnitten, dann durch Kompression optimiert. Weiter das Bild im Boxy SVG geöffnet und evtl. SVG-Logo. Das Bild im Gesamten ist dann als SVG zu konvertieren. – das entspricht so etwa der Dateigröße um die 120 kB bis so 180 kB. Es geht da dem Logo um den Brennpunkt der Schärfe des Emblems und dort der Schrift. – aber derart das Headerbild mit so kB habe ich wieder abgeschafft, da es immer noch’n Browser gibt, welcher da mit Wegerl.at nicht zurechtkommt.
Die über Boxy SVG erstellte Bild, die Icons sind so erstellt, dass zur Öffnung in neuem Tab. Das tut es weder in WordPress noch in ClassicPress. Ob Website mit https oder http.
Weiter ist zu bemerken: Dem SVG des Direkten anklicke wie der Ente Sprechblase, dass WordPress die Verbindung ablehnt. Der Link sollte da zum Plug-in Helpful leiten. Anders, wenn das SVG-Bild aus der Mediathek (s. oben … groß im → neuen Browser-Tab). Da ist es egal, ob der Link dann im selben Browser-Tab oder in neuem Browser-Tab es funkt. Dasselbe dem anklicke vom Globus, also der Link auf Amazon wie auch der Link von ‘WordPress Reparatur’ auf Youtube.
Anders war es dem TEST am MAMP (http://localhost:8888/…) Theme Twenty Seventeen. Dort funktionierten die Links target="_blank" vom SVG. Allein mit Plug-in Safe SVG Version 1.9.8.

Das SVG im Objekt-Tag

Dieser Code zur Anwendung:

<object data="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet_noopener.svg" type="image/svg+xml" width="600" height="300"><!-- 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>

Nach der Umstellung von Größe und umschalten des Modus von ‘Text’ in ‘Visuell’ ändert bzw. ergänzt sich der Code.

<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! Infolge ergeht das nämlich erst nach der Änderung von der Größe.

Der Code hält wie eingegeben so:
  • Den Code <objekt data=… … …</objekt> in Text,
  • die Datei-URL einfügen und
  • die Größe editieren.
  • Dann den gesamten Code kopieren und erneut einfügen.

…da bleibt der Code wie gehabt. Dabei zur Beachtung! – wenn das SVG hier von der Größe sehr zu viel eingestellt ist, erfolgt wiederum die Ergänzung des Codes. Ja, und jeweiligen hin- und herschalten von Text / Visuell vermehren sich diese.

Also hier, Nein! – da nützt auch nicht, das mit <div>. Das in <div><objekt data=… … …</objekt></div>, das funkt nicht.

Und nächst das Bspw, mit Plug-in SVG Support.

Das SVG im img-Tag

Das Beispiel ist hier nicht, da dies, so, nicht funkt. Das hat aber nicht direkt mit dem Plug-in zu tun … 

… mit Plug-in SVG Support. Der Einstellung ‘Enable Advanced Mode / ja’

<img class="style-svg" alt="alt-text" src="image-source.svg" />

Im direkten Anklicken der verlinkten Icons öffnen die nicht in einem Scroller. Aber nicht so, wie nämlich die Links als target="_blank" sind.

Des nächst fiel auf, dass nach ‘Veröffentlichen’ das zweite SVG mit den verlinkten Icons nicht funkte. Daher habe ich das Bspw hier auf

Seitenbeitrag.

Das mit der Größe vom SVG

Die Größe im Modus-Visuell mit ziehen. Oder eine Class erstellen. Bspw:

.logo-class { width: 50%; }
Das mit den ‘margins’

… und die Position ist wie normalen img-Bild.

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 alles, mit dem Plug-in Easy FancyBox. Das Bild ist frugal durch ‘Dateien hinzufügen’ visuell, das dann mit Link zur Mediendatei. So nach Anklicken des Bilds öffnet die Light-Box und von dort sind die Verlinkungen anklickbar.


Aktualisiert im Jahr 2022-August