Diese Woche gibt es von mir eine neue Linksammlung, rund um das Thema Grafik. Ich möchte euch ein paar Bibliotheken vorstellen mit denen ihr (interaktive) Grafiken erstellen könnt – egal ob Bilder, Diagramme oder vielleicht sogar Icons 🙂

Womit zeichnet man im Web?
Mit „interaktive Grafiken“ meine ich natürlich keine statischen Bilder wie z.B. JPG, PNG oder GIF sondern viel eher Grafiken die auf eure Aktionen reagieren. Zwei Techniken sind hier besonders weit verbreitet und beliebt: SVG und Canvas. Und dafür gibt es inzwischen mehr als genug Bibliotheken!

• Raphaël ist eine verbreitete Bibliothek zum zeichnen von Grafiken mit Hilfe von SVG. Die Browser Kompatibilität ist vorbildlich: Firefox 3+, Safari 3+, Chrome 5+ und sogar IE6+
• d3 steht für „Data-Driven Documents“ und ist eine ganze Ecke schwieriger zu bändigen als Raphael – doch gleichzeitig auch um einiges mächtiger. D3 verwendet SVG und ist bestens geeignet wenn Daten visualisiert werden sollen!
• Snap.svg ist eine noch recht junge (etwa ein-einhalb Jahre alte) Bibliothek. Diese verwendet ebenfalls SVG und zielt auf moderne Browser ab um möglichst viele aktuelle Features zu liefern.
• Fabric.js ist eine recht umfangreiche Bibliothek zum erstellen von Canvas grafiken. Es gibt eine gute Dokumentation und einige Beispiele.
• Paper.js ist eine Bibliothek zum zeichnen von Grafiken in Canvas Elementen.
• EaselJS ist ebenfalls eine Bibliothek die sich auf das Canvas Element spezialisiert hat – hier gibt es sogar kleine Spiele („Space Rocks“ inklusive Soundeffekten) als Beispiel.

Der Vollständigkeit halber möchte ich kurz die Unterschiede zwischen Canvas und SVG erläutern:
Eine Canvas Grafik wird gerastert dargestellt und wird innerhalb eines Canvas Elements gezeichnet – dies geschieht mit Javascript. Einige Spiele-Bibliotheken wie z.B. Construct 2 oder Impact benutzen diese Technik.
SVG Grafiken dagegen sind aufgebaut wie HTML oder XML, es gibt Elemente und Attribute die die Grafik beschreiben. Die fertige Grafik wird nicht gerastert sondern besteht aus Vektoren und ist damit bestens für Geräte mit hoher Pixeldichte geeignet 🙂 Außerdem lassen sich die Grafik Elemente mit Bibliotheken wie jQuery oder Prototype verändern – man kann sie sogar mit CSS stylen!

Damit möchte ich mich für Heute auch schon wieder verabschieden und wünsche euch eine angenehme und produktive Woche! Bis zum nächsten mal wünsche ich euch Happy Coding!