SVG …
Die Icons mit Links und so

… Das ist gar nicht nur so als Spielerei. Da es sehr hilfreich sein kann, wenn in einem Bild das als SVG die Icons mit Links sind. 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!


Im anklicke da oben die linkerseits und grau hinterlegten Begriffe. Da gehts so bspw zur Gebrauchsanweisung. Im anklicke direkt öffnet hier oben die verlinkte Website und ist dann zum Scrollen. 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 das anklicke 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 in groß im → neuen Tab.

OT: Das SVG ist  fast 450 kB …
OT: 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.

 

An und für sich sind dem über Boxy SVG erstellte Bild die Icons mit Link 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 funkten 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://simpel.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://simpel.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://simpel.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://simpel.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 her schalten von Text / Visuell vermehren sich diese.

Also hier, Nein! – da nützt auch nicht, das <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 den Link target="_blank" funkt.