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.
]]>
					
		
		
			
		
		
		https://sgaul.de/2011/10/11/canvas-das-ende-von-svg/
		
		
		Tue, 11 Oct 2011 14:37:34 +0000
				
		
		
		https://sgaul.de/?p=580

					
										Um Webinhalte nicht immer nur trist als Text erscheinen zu lassen, haben sich Bilder recht gut bewährt: Diagramme und Schaubilder helfen dem Nutzer einen Überblick zu bekommen. Bisher wurden allerdings meist konventionelle Rastergrafiken verwendet, die einige Nachteile haben. Will man hiervon weg, stellt sich aber gleich die nächste Frage: Das neue HTML-5-Element Canvas oder das etwas ältere SVG?

Die pixelige Lösung
In der Tat sind Rastergrafiken wie PNG eine denkbar schlechte Wahl. Sie skalieren bekanntlich absolut schlecht und sehen in jeder außer der Originalgröße schlecht aus (selbst das herunterskalieren im Browser führt oft zu schrecklichen Resultaten).
Der wesentliche Punkt ist aber, dass die Textinhalte nicht mehr als solche vorliegen, was diverse Konsequenzen hat, die vor allem darauf beruhen, dass sie nicht mehr automatisch ausgelesen werden können:

Screenreader für Behinderte Menschen haben keine Chance mehr.
Die Seite kann nicht nach diesen Inhalten durchsucht werden.
Suchmaschinen können mit den vielleicht relevanten Inhalten nichts anfangen

SVG war einmal?
Im allgemeinen HTML-5-Hype hört man von SVG fast gar nichts mehr: Canvas soll das browserinterne Zeichnen revolutionieren.

Das Canvas-Element kann einfach leer im Browser definiert werden, anschließend darf man mit Javascript darin herumzeichnen.
Maschinenlesbarkeit (= Relevanz für Suchmaschinen)
Hiermit übernimmt Canvas aber die Probleme der Rastergrafiken. Da die Inhalte erst dynamisch eingefügt werden und somit auch die relevanten Texte nur im Javascript-Code stehen, gehen die Vorteile der „lesbaren“ Bilder verloren.
Hier kann SVG punkten: Die Vektorgrafiken werden direkt als XML-Markup in den Quelltext integriert oder extern referenziert. So sind auch alle relevanten Suchbegriffe maschinenlesbar.
HTML-Fallback
Eine praktikable Lösung ist es, die Inhalte für das Canvas in einfachem HTML zu notieren. Eine Mindmap wäre dann nichts anderes als eine Verschachtelung von <ul>- und <ol>-Elementen. Anschließend könnte man für menschliche Betrachter mittels Javascript diesen Inhalt durch ein Canvas ersetzen, welches seine Daten aus eben diesem Code generiert. Ältere Browser, die Canvas nicht unterstützen, zeigen einfach das HTML an und bieten somit ein angemessenes Fallback-Verhalten. Allerdings kann man auf die gleiche Weise auch SVG dynamisch erzeugen. Genau genommen erlaubt es diese Lösung sogar, Rastergrafiken maschinenlesbar zu machen.
Wenn man es auf diese Art umsetzt, steht Canvas SVG hier in nichts nach. Ist es allerdings nicht möglich, da man komplexe Grafiken erzeugen will, die sich nicht automatisch generieren lassen, ist SVG hier im Vorteil.
Browserunterstützung
Dieser Punkt ist schwer zu bewerten. Alle neuen Browser unterstützen beide Formate. Beim Internet Explorer, also dem einzigen, bei dem man wirklich ältere Versionen beachten müsste, sieht es für beide mau aus. Vor dem 9er ist nicht viel zu erwarten (selber der IE 8 kann beides gar nicht). Allerdings gibt es hierfür Plugins und zur Not kann eben das zuvor angesprochene HTML-Fallback helfen.
Erzeugung
Hier geht der Punkt klar an SVG: Hierfür gibt es unzählige hochwertige Editoren wie etwa Inkscape. Für Canvas sind mir noch keine Vereinfachungen bekannt, hier muss man heutzutage wohl eher programmieren als wirklich zeichnen.
Mein Fazit
Ich persönlich konnte mich noch nicht wirklich für eine der beiden Technologien entscheiden. Gern würde ich bei Gelegenheit eine Art Mindmap-Generator entwerfen. Ich bin mir aber alles andere als sicher, dass dieser unbedingt auf Canvas aufbauen muss. SVG ist ein verbreiteter Standard und ist vor allem dank seiner sehr guten Editoren klar überlegen.
Das HTML-5-Logo ist Eigentum von „The World Wide Web Consortium (W3C)“.
]]>