inline svg wird nicht gezeigt

Kannst Du mir mal bitte einen Link zur Seite schicken? Auch gern per persönlicher Nachricht. Dann schau ich mir das gerne mal an.
Ohne Ansicht des "Patienten" hilft das leider keinem von uns.

Allgemein kann das Problem allerdings nicht all zu schwer zu lösen sein.

Lieben Gruß
Thomas | TAR MediaDesign

Und wo hast du versucht, diesen Codeschnipsel einzufügen?

Gruß
helix

Schön, dass man sich mit deinem Link die Fragen wenigstens selber beantworten kann. Wenigstens so halb. (Nicht böse gemeint, nur mit einem freundlich-ironischen Zwinkern.)

Dein Ding steht in einem <div id="post-2387" class="col-sm-12"> Das mit der ID interpretiere ich mal so, dass du versucht hast, dein SVG im Content-Bereich / über den Editor im Adminbereich einzufügen.
Bitte widersprich mir, wenn ich falsch interpretiert habe.
Bitte probiere mal aus, ob das SVG angezeigt wird, wenn du es direkt durch die Template-Datei ausgeben lässt, z.B. vor der Ausgabe des Loop.

Gruß
helix

Ich reich dir einfach mal von der anderen Seite die Hand: ich habe es schlicht nicht ausprobiert, es über den Admin-Bereich zu machen, weil ich mehr oder weniger vermutet habe, dass der Editor den Code „einkassiert“.

Habe ich jetzt nachgeholt: Doch. Geht.

Nur: Der Browser versteht den Style nicht, der im SVG steht. Das heißt, das style-Tag musst du komplett rausnehmen. Für die Farbgebung: Entweder komplett über CSS dem Pfad eine Füllung geben. Oder das fill im SVG in den Pfad mit reinnehmen (und dann nur die Änderung, z.B. bei Mouse-over, im CSS).
Und vielleicht besser hier die Zeilenumbrüche rausnehmen, der Editor haut dann immer noch br-Tags für Zeilenumbrüche dazwischen, das ist nicht sinnstiftend.

Einfach mal probieren, diesen Codeschnipsel in deine Seite / Beitrag einzubauen. Bitte im Reiter „Text“ (aber das hattest du vermutlich schon so gemacht?)

<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"><path id="Wagen_2_"class="st0"d="M24.3,43.9c0,2.6-2.1,4.8-4.8,4.8s-4.8-2.1-4.8-4.8s2.1-4.8,4.8-4.8S24.3,41.3,24.3,43.9zM44.6,13c-1-0.1-1.8,0.5-2,1.5l-1.7,10.9h-1v-15c0-0.5-0.4-1-1-1h0c-0.5,0-1,0.4-1,1v15h-1.1V9.6c0-0.1-0.1-0.1-0.1-0.1h0c-0.1,0-0.1,0.1-0.1,0.1v15.8h-2V9.6c0-0.1-0.1-0.1-0.1-0.1h0c-0.1,0-0.1,0.1-0.1,0.1v15.8h-1.1v-15c0-0.5-0.4-1-1-1s-1,0.4-1,1v15h-1.9V9.9c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.4,0.2-0.4,0.4v15.6h-2.2v-15c0-0.5-0.4-1-1-1s-1,0.4-1,1v15h-1.5V9.9c0-0.2-0.2-0.4-0.4-0.4s-0.4,0.2-0.4,0.4v15.6h-1.3V10c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v15.4h-1.9v-15c0-0.5-0.4-1-1-1h0c-0.5,0-1,0.4-1,1v15h-0.4L11.3,5.2c-0.1-0.6-0.6-1.1-1.2-1.3L3.3,1.8C2.4,1.5,1.4,2,1.1,3C0.9,3.9,1.4,4.8,2.3,5.1l5.8,1.8l4.6,20.6c0,0,0,0,0,0l1.7,7.8c0.2,0.8,0.9,1.4,1.7,1.4h24.7c1,0,1.7-0.8,1.7-1.7c0-1-0.8-1.7-1.7-1.7H17.6l-1-4.3h25.8c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0h0c0.5,0,0.9-0.2,1.2-0.5l0,0c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.2,0.2-0.5,0.3-0.7L46,15C46.2,14.1,45.5,13.2,44.6,13z M37.2,39.2c-2.6,0-4.8,2.1-4.8,4.8s2.1,4.8,4.8,4.8s4.8-2.1,4.8-4.8S39.8,39.2,37.2,39.2z"fill="#f0f0f0"/></svg>

Soviel zur Theorie. In der Praxis ist wahrscheinlich ein Sprite mit den verschiedenen Bildversionen in den meisten Fällen sinnvoller, weil die Inline-SVGs wohl gerade und ausgerechnet Mobilgeräte ziemlich ausbremsen. Will man mal was Gutes tun …

SVG-Dateien über FTP hochgeladen und als Grafik oder Hintergrundgrafik eingebunden, funktioniert problemlos. Willst du SVGs über die Mediathek einbinden, musst du erst in deiner functions.php definieren, dass du SVGs hochladen darfst.
Hier geht halt nicht die direkte Ansteuerung über CSS. Deswegen, wie gesagt, Sprites bauen.

Gruß
helix

P.S.: nette Idee, deine Grafik …

Hallo, du hattest einfach das Glück, dass ich letzte Woche mit fast genau dieser Fragestellung einige Zeit verbracht habe.

Zuerst habe ich so ein „Hamburger“-Icon als SVG gemacht und direkt inline in meine header.php eingebunden. Das ging prima. Bis ich das SVG dahingehend ändern wollte, dass aus drei waagrechten Balken zwei gekreuzte Balken werden (x als Zeichen für „Menü schließen“). Es sah zunächst sehr lustig aus, weil zwar der Winkel der Balken gestimmt hat, aber nicht ihre Anordung in der Fläche. Weitere Recherche hat ergeben, dass das Animieren von SVG sehr anderen Regeln folgt als CSS-Animationen. Da konnte ich dann sehr schnell entscheiden, dass mein Interesse, das herauszufinden (auszuknobeln), wie es geht nicht soo groß ist, dass ich da so viel Zeit reinstecke. Also Sprite mit vier Zuständen.

Dann habe ich versucht, an anderer Stelle SVG-Icons inline als Hintergrundgrafik ins CSS einzubinden.
Daran bin ich so dermaßen gescheitert … ich habe es zwar hinbekommen, dass eine Grafik angezeigt wurde. Aber ich habe nicht den Fehler gefunden, der dafür gesorgt hat, dass das nachfolgende in der CSS-Datei nicht mehr gelesen wurde. Also auch hier ein Sprite …

Jetzt zu deiner Frage mit der Rechenleistung: Rechenleistung ist nicht gleich Rechenleistung. SVGs, die als Grafiken geladen werden, werden vom Browser in den Cache gelegt und sind dann für weitere Aufrufe schnell zur Verfügung. (Im CSS würde es auch in den Cache gelegt, aber wenn dann die CSS-Datei insgesamt herrlich groß wird, fängt es auch an, kontraproduktiv zu werden …)
Grundlage dieser Aussage / Annahme ist dieser Beitrag, der jetzt auch schon von 2013 ist. http://dev.mobify.com/blog/data-uris-are-slow-on-mobile/ Natürlich kann sich da viel getan haben.
Wenn man sich tiefer in die Materie eingräbt, findet man tausenderlei Wenns und Abers. Man stellt fest, dass man dann nochmal genauer bei caniuse.com und sonstwo checken muss. Und irgendwann ist man einfach an dem Punkt, wo man sagt: ich nehme eine etablierte Technik, von der ich weiß, dass es funzt … (und die Sache mit den SVGs inline eingebunden „zur Wiedervorlage“, wenn ich mal wieder Zeit und Lust habe …)

Das heißt ja auch nicht, das SVG-Format grundsätzlich zu verwerfen.
Sprites sind so beliebt, weil der Browser nur eine Grafik laden muss, also nur ein Request statt etliche. Noch werden die überwiegend als PNG gemacht. Als SVG funktionieren sie inzwischen genausogut (weil die Browser inzwischen SVG „können“) und sind nochmal deutlich kleiner. Das heißt, mit Sprites im SVG-Format hat man wirklich schon „von Haus aus“ was ziemlich Sinnvolles angelegt.

Und das Danke gilt auch umgekehrt: Sinnvolle Forenbeiträge kommen in den meisten Fällen aus den passenden Fragen (man soll die Fragen nicht gering schätzen!) – und Fragen bringen immer wieder die Motivation, sich mit einer Problemstellung nochmal genauer auseinanderzusetzen etc.

Gruß
helix