{"id":580,"date":"2011-10-11T16:37:34","date_gmt":"2011-10-11T14:37:34","guid":{"rendered":"https:\/\/sgaul.de\/?p=580"},"modified":"2014-03-13T21:34:54","modified_gmt":"2014-03-13T20:34:54","slug":"canvas-das-ende-von-svg","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2011\/10\/11\/canvas-das-ende-von-svg\/","title":{"rendered":"Canvas: Das Ende von SVG?"},"content":{"rendered":"<p>Um Webinhalte nicht immer nur trist als Text erscheinen zu lassen, haben sich Bilder recht gut bew\u00e4hrt: Diagramme und Schaubilder helfen dem Nutzer einen \u00dcberblick zu bekommen. Bisher wurden allerdings meist konventionelle Rastergrafiken verwendet, die einige Nachteile haben. Will man hiervon weg, stellt sich aber gleich die n\u00e4chste Frage: Das neue HTML-5-Element Canvas oder das etwas \u00e4ltere SVG?<!--more--><\/p>\n<h2>Die pixelige L\u00f6sung<\/h2>\n<p>In der Tat sind Rastergrafiken wie PNG eine denkbar schlechte Wahl. Sie skalieren bekanntlich absolut schlecht und sehen in jeder au\u00dfer der Originalgr\u00f6\u00dfe schlecht aus (selbst das herunterskalieren im Browser f\u00fchrt oft zu schrecklichen Resultaten).<\/p>\n<p>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\u00f6nnen:<\/p>\n<ul>\n<li>Screenreader f\u00fcr Behinderte Menschen haben keine Chance mehr.<\/li>\n<li>Die Seite kann nicht nach diesen Inhalten durchsucht werden.<\/li>\n<li>Suchmaschinen k\u00f6nnen mit den vielleicht relevanten Inhalten nichts anfangen<\/li>\n<\/ul>\n<h2>SVG war einmal?<\/h2>\n<p>Im allgemeinen HTML-5-Hype h\u00f6rt man von SVG fast gar nichts mehr: Canvas soll das browserinterne Zeichnen revolutionieren.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-590\" title=\"HTML5_browser_future\" src=\"https:\/\/sgaul.de\/wp-content\/uploads\/2011\/10\/HTML5_browser_future.png\" alt=\"\" width=\"321\" height=\"161\" srcset=\"https:\/\/sgaul.de\/wp-content\/uploads\/2011\/10\/HTML5_browser_future.png 321w, https:\/\/sgaul.de\/wp-content\/uploads\/2011\/10\/HTML5_browser_future-300x150.png 300w\" sizes=\"(max-width: 321px) 100vw, 321px\" \/><\/p>\n<p>Das Canvas-Element kann einfach leer im Browser definiert werden, anschlie\u00dfend darf man mit Javascript darin herumzeichnen.<\/p>\n<h3>Maschinenlesbarkeit (= Relevanz f\u00fcr Suchmaschinen)<\/h3>\n<p>Hiermit \u00fcbernimmt Canvas aber die Probleme der Rastergrafiken. Da die Inhalte erst dynamisch eingef\u00fcgt werden und somit auch die relevanten Texte nur im Javascript-Code stehen, gehen die Vorteile der \u201elesbaren\u201c Bilder verloren.<\/p>\n<p>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.<\/p>\n<h4>HTML-Fallback<\/h4>\n<p>Eine praktikable L\u00f6sung ist es, die Inhalte f\u00fcr das Canvas in einfachem HTML zu notieren. Eine Mindmap w\u00e4re dann nichts anderes als eine Verschachtelung von &lt;ul&gt;- und &lt;ol&gt;-Elementen. Anschlie\u00dfend k\u00f6nnte man f\u00fcr menschliche Betrachter mittels Javascript diesen Inhalt durch ein Canvas ersetzen, welches seine Daten aus eben diesem Code generiert. \u00c4ltere Browser, die Canvas nicht unterst\u00fctzen, 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\u00f6sung sogar, Rastergrafiken maschinenlesbar zu machen.<\/p>\n<p>Wenn man es auf diese Art umsetzt, steht Canvas SVG hier in nichts nach. Ist es allerdings nicht m\u00f6glich, da man <a title=\"Beispiel einer schwer generierbaren Grafik\" href=\"http:\/\/t3n.de\/news\/7-innovationen-markte-revolutioniert-haben-infografik-336032\/innovationen_infografik\/\">komplexe Grafiken<\/a> erzeugen will, die sich nicht automatisch generieren lassen, ist SVG hier im Vorteil.<\/p>\n<h3>Browserunterst\u00fctzung<\/h3>\n<p>Dieser Punkt ist schwer zu bewerten. Alle neuen Browser unterst\u00fctzen beide Formate. Beim Internet Explorer, also dem einzigen, bei dem man wirklich \u00e4ltere Versionen beachten m\u00fcsste, sieht es f\u00fcr beide mau aus. Vor dem 9er ist nicht viel zu erwarten (selber der IE 8 kann beides gar nicht). Allerdings gibt es hierf\u00fcr Plugins und zur Not kann eben das zuvor angesprochene HTML-Fallback helfen.<\/p>\n<h3>Erzeugung<\/h3>\n<p>Hier geht der Punkt klar an SVG: Hierf\u00fcr gibt es unz\u00e4hlige hochwertige Editoren wie etwa <a href=\"http:\/\/inkscape.org\/?lang=de\">Inkscape<\/a>. F\u00fcr Canvas sind mir noch keine Vereinfachungen bekannt, hier muss man heutzutage wohl eher programmieren als wirklich zeichnen.<\/p>\n<h2>Mein Fazit<\/h2>\n<p>Ich pers\u00f6nlich konnte mich noch nicht wirklich f\u00fcr eine der beiden Technologien entscheiden. Gern w\u00fcrde 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 \u00fcberlegen.<\/p>\n<section class=\"source\">Das HTML-5-Logo ist Eigentum von \u201eThe World Wide Web Consortium (W3C)\u201c.<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Um Webinhalte nicht immer nur trist als Text erscheinen zu lassen, haben sich Bilder recht gut bew\u00e4hrt: Diagramme und Schaubilder helfen dem Nutzer einen \u00dcberblick zu bekommen. Bisher wurden allerdings meist konventionelle Rastergrafiken verwendet, die einige Nachteile haben. Will man hiervon weg, stellt sich aber gleich die n\u00e4chste Frage: Das neue HTML-5-Element Canvas oder das etwas \u00e4ltere SVG?<\/p>\n","protected":false},"author":1,"featured_media":597,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[179,180],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/580"}],"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=580"}],"version-history":[{"count":18,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/580\/revisions"}],"predecessor-version":[{"id":599,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/580\/revisions\/599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media\/597"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}