Canvas: Das Ende von SVG?

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)“.