svg-Bild als Symbol im Text einfügen.

[DanielDD]

Hallo Leute,

ich wollte in meiner Wordpress-Seite externe Links kennzeichnen und habe von irgendwoher (legal) ein freies
Symbol kopiert und in den Text eingefügt. Dieses Symbol führt bei jeder Verwendung zu einem externen
Zugriff auf eine svg-Datei, was datenschutzrechtlich bedenklich ist. Ich kann diese Datei problemlos lokal hosten.
Mit der Einbindung als Symbol im Text habe ich jedoch Probleme.

Das Einbinden von

<img src=" ... Pfad ... " />

in den Text führt zu einer viel zu großen Darstellung mit Zeilenumbrüchen vor und hinter dem Bild.

Wie kann ich das Bild als Symbol einfügen, d.h. es soll die Höhe eines Buchstaben haben und
ohne Zeilenumbrüche oder Abstände in den Text eingefügt werden.

Mit freundlichen Grüßen,
Daniel

PS: Durch die Angabe von style="height:2vh;" kann ich die Größe beeinflussen, allerdings hätte ich
gern ein Stück Code, das sich automatisch der Fontgröße anpasst. Außerdem besteht noch das
Problem, dass der Hintergrund des Bildes nicht transparent ist.

 

[Sempervivum]

hätte ich
gern ein Stück Code, das sich automatisch der Fontgröße anpasst.

Das erreichst Du, wenn Du die Maßeinheit "em" verwendest: height: 1em; .

mit Zeilenumbrüchen vor und hinter dem Bild.

Das Problem hatte ich auch, als ich das in einer Testdatei getestet habe und ich hatte zunächst keine Erklärung dafür weil ein img standardmäßig ein Inline-Element ist. Des Rätsels Lösung war dann, dass mein umgebender Container, das body, ein display: flex; hatte. Überprüfe das mal bei dir, der Seiteninspektor kann dir dabei helfen:
https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor#Arbeiten_mit_dem_Seiteninspektor

 

[DanielDD]

Danke, nach dem skalieren mit der Maßeinheit em sind auch die Zeilenumbrüche verschwunden.
Bekommst Du das mir der Transparenz auch hin? Es geht um diese Datei:
https://s.w.org/images/core/emoji/15.0.3/svg/1f517.svg

 

[Sempervivum]

In meiner Testdatei ist dieses SVG transparent, ich habe mich davon überzeugt, indem ich den Hintergrund der Seite rot gemacht habe.
Ist zwar irgend wie unwahrscheinlich, aber prüfe, ob dem img eine Hintergrundfarbe irgend wo zugewiesen ist.

 

[Sempervivum]

... oder svg

 

[DanielDD]

style="height:1em;background:none;" funktioniert, danke!!!

 

[Sempervivum]

Da nicht für, freut mich, dass es funktioniert.

 

[DanielDD]

Ich habe jetzt noch etwas besseres gefunden. Ich habe die Zeilen

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

in die functions.php eingefügt. Dann werden die mit Copy&Paste
eingefügten Symbole korrekt dargestellt, ohne dass externe Zugriffe
erfolgen. Damit ist dieses Problem für die gesamte Wordpress-Instanz
auf einen Schlag gelöst.

DanielDD