SVG-Bilder lassen sich einfach in Code-Form in HTML einbinden:
In einem modernen Browser sollte dann ein grauer Kreis mit rotem Rand zu sehen sein:
Leider ist der HTML-Modus von WordPress hier wenig hilfreich, da die automatischen Quelltext-„Korrekturen“ jeden Umbruch in ein <br> umformen. Damit kann der Browser leider nichts anfangen.
Zwei Möglichkeiten für WordPress-Nutzer
Eine Möglichkeit wäre es daher, das gesamte SVG in eine Zeile zu schreiben. Das kann aber umständlich sein und macht ein manuelles Nachjustieren (etwa wenn man einen Rechtschreibfehler korrigieren will) fast unmöglich.
Die weitaus schönere Methode ist es, das SVG in ein <pre> zu kapseln. Den Inhalt lässt WordPress unberührt und die Browser zeigen das Bild dennoch als solches an.
SVG-Quelltexte anzeigen
Um nun (wie oben) den Quelltext des SVGs anzuzeigen, kann man in WordPress Plugins wie WP-Syntax nutzen. Hier werden dem Inhalt von <pre> diverse Spans hinzugefügt, um die Syntax farblich hervorzuheben. Der Browser erkennt den Inhalt dann nicht mehr als SVG und zeigt stattdessen den Code an:
Bei dieser mehrfachen Verkapselung (<svg> in <pre> in <pre>) geht hier das letzte </pre> verloren. Perfekt ist die Lösung somit noch nicht, zeigt aber zumindest worum es geht.