Seit einiger Zeit gibt es ein Plug-In für Adobe Illustrator, um Vektorgrafiken in Richtung HTML5 zu exportieren. Das kostenlose „Ai->Canvas Plug-in” wandelt eine Illustratordatei in HTML-/JavaScript-Code um, der die Inhalte in ein HTML5-Canvas-Element zeichnet. Dies funktioniert nicht nur mit einfachen Grafiken, sondern auch mit komplexen Gestaltungen sehr gut.
The Ai->Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element using JavaScript drawing commands. Animation can be added to control rotation, scaling, opacity, and motion along a path. Then, events can be used to trigger other animations.
Hier ein Beispiel einer exportierten Grafik:
Zusätzlich lassen sich die Ebenen sogar etwas animieren, indem man die gewünschten Animationen in den Ebenennamen schreibt. Auch hierzu ein Beispiel.
Das Illustrator-Export-Plug-In schreibt HTML und JavaScript, das in aktuellen Browsern funktioniert (ab Internet Explorer 9, Firefox 3.6, Chrome 6, Safari 5 und Opera 10). Selbstverständlich werden die Grafiken inklusive Animationen auch auf mobilen Browser (z.B. iPhone oder iPad) dargestellt, da diese bekanntlich das Canvas-Element unterstützen. Unterstützt werden Illustrator CS3, CS4 und CS5 (Mac und Windows).
Link: AI to Canvas Plug-In
[ad]