Object-Tag SVG …
das mit Links

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

SVG mit Links. Das SVG ist zum Beispiel mit Icons und diese sind verlinkt. Das ist dann der Website durch Object-Tag wiederzugeben. Bsp 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 Information sehr gefragt! – lass uns schauen, wie das gemeint ist.




↑ Anklicke da oben die linkerseits und grau hinterlegten Begriffe. Dann ist das als Beschreibung für den Benutzer. Und durch Anklicken der Icons geht es gleich zur Information der 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 ist das hier im Beispiel.

So nun weiter im Bsp 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.

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 Scrolle, aber allen Links funktioniert das hier nicht.

Alternatives PNG-Bild
k-images_wolke4

Das SVG-Bild größer  → Anklicke oder in Groß so mit Rechtsklick und ‘Link in neuem Tab öffnen’.

 OT:  Das SVG ist fast 450 kB …
Das SVG ist 450 kB (500 px mal 390 px). Solcherart SVG ist sehr aufwendig. … 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-Feld. 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. mit SVG-Logo abgespeichert. 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 das Headerbild mit so um die 120 KB ist nicht das, da manch Browser mit der Seitenladezeit nicht zurechtkommt. Das aktuelle SVG Header-Banner hat nur so 9 KB.
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 funktioniert. 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 Object-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! Mitunter ergeht das auch erst nach der Änderung von Größe des SVG? Usw.🫠

Der Code hält wie eingegeben so:
  • Den Code <object data=… … …</object> in Text,
  • die Datei-URL einfügen und
  • die Größe editieren.
  • Den Cursor aus dem <object data=… … …</object>  Bereich heraus klicken. Also den Cursor in den Absatz ober- oder unterhalb einklicken und auf Visuell umschalten.

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

Das SVG im img-Tag

Das Beispiel ist hier nicht, da dies, so, nicht funktioniert. 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 Scrolle. 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 funktionierte. 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, mit dem Plug-in Easy FancyBox.

Das Bild ist einfach durch ‘Dateien hinzufügen’ visuell. Das dann mit Link zur Mediendatei. Somit nach Anklicken des Bilds öffnet die Light-Box von Easy FancyBox und von dort sind die Verlinkungen anklickbar, aber allen Links funktioniert das hier nicht, da die Websites das nicht (mehr) zulassen. So, mit Rechtsklick und Link/Bild in neuem Tab öffnen funktioniert das wiederum.

Object-Tag


Aktualisiert im Jahr 2022-November