{"id":744,"date":"2011-11-24T17:15:06","date_gmt":"2011-11-24T16:15:06","guid":{"rendered":"https:\/\/sgaul.de\/?p=744"},"modified":"2014-03-13T21:34:52","modified_gmt":"2014-03-13T20:34:52","slug":"svg-bilder-und-svg-code-in-wordpress-einbinden","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2011\/11\/24\/svg-bilder-und-svg-code-in-wordpress-einbinden\/","title":{"rendered":"SVG-Bilder und SVG-Code in WordPress einbinden"},"content":{"rendered":"

SVG-Bilder lassen sich einfach in Code-Form in HTML einbinden:<\/p>\n

\r\n \r\n   \r\n <\/svg>\r\n<\/body><\/pre>\n
In einem modernen Browser sollte dann ein grauer Kreis mit rotem Rand zu sehen sein:<\/p>\n
\r\n   \r\n<\/svg><\/pre>\n
Leider ist der HTML-Modus von WordPress hier wenig hilfreich, da die automatischen Quelltext-\u201eKorrekturen\u201c jeden Umbruch in ein <br><\/code> umformen. Damit kann der Browser leider nichts anfangen.<\/p>\n
Zwei M\u00f6glichkeiten f\u00fcr WordPress-Nutzer<\/h2>\n
Eine M\u00f6glichkeit w\u00e4re es daher, das gesamte SVG in eine Zeile zu schreiben. Das kann aber umst\u00e4ndlich sein und macht ein manuelles Nachjustieren (etwa wenn man einen Rechtschreibfehler korrigieren will) fast unm\u00f6glich.<\/p>\n
Die weitaus sch\u00f6nere Methode ist es, das SVG in ein <pre><\/code> zu kapseln. Den Inhalt l\u00e4sst WordPress unber\u00fchrt und die Browser zeigen das Bild dennoch als solches an.<\/p>\n
\r\n  \r\n   \r\n  <\/svg>\r\n<\/pre>\n
SVG-Quelltexte anzeigen<\/h3>\n
Um nun (wie oben) den Quelltext des SVGs anzuzeigen, kann man in WordPress Plugins wie WP-Syntax<\/a> nutzen. Hier werden dem Inhalt von <pre><\/code> diverse Spans hinzugef\u00fcgt, um die Syntax farblich hervorzuheben. Der Browser erkennt den Inhalt dann nicht mehr als SVG und zeigt stattdessen den Code an:<\/p>\n
\r\n  \r\n   \r\n  <\/svg>\r\n<\/pre>\n
Bei dieser mehrfachen Verkapselung (<svg><\/code> in <pre><\/code> in <pre><\/code>) geht hier das letzte <\/pre><\/code> verloren. Perfekt ist die L\u00f6sung somit noch nicht, zeigt aber zumindest worum es geht.<\/p>\n","protected":false},"excerpt":{"rendered":"
SVG-Bilder lassen sich einfach in Code-Form in HTML einbinden. Leider ist der HTML-Modus von Wordpress hier wenig hilfreich, da die automatischen Quelltext-\u201eKorrekturen\u201c jeden Umbruch in ein 
 umformen. Damit kann der Browser leider nichts anfangen. Dennoch gibt es auch hier zwei M\u00f6glichkeiten, ein SVG direkt in den Code zu schreiben.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[180,35],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/744"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=744"}],"version-history":[{"count":28,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/744\/revisions"}],"predecessor-version":[{"id":898,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/744\/revisions\/898"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}