That plugin Mike Swanson wrote for saving Adobe Illustrator vector shapes as XAML markup has a smarter sister!

Before you read this blog posting please first read this blog posting which should leave you mildly impressed. You're probably thinking to yourself: Well, that's kind of interesting but when am I ever gonna use XAML? I certainly know how you feel. Well, now for the good news, Ai->Canvas Plug-In for Adobe Illustrator is a comparable Adobe Illustrator plugin, installed in the same manner, by Mike Swanson, which lets you export to an HTML5 Canvas. You'll see an option for <canvas> (*.HTML) whenever you go to export and it will make an .html file.

Let's go through an example. Having made a swan sing a swan song for XAML in my prior blog post, I wanted to instead use some artwork for this blog posting which said "new" and "modern" instead of "old" and "dying" and in sticking with birds and being jokey I thought I'd make a stork bringing us a baby in a bag which symbolizes the newness of HTML 5 I guess. I broke my artwork up across several layers again in Adobe Illustrator. The background surrounding everything was a 600 points by 300 points rectangle carefully made in the name of having a canvas that was ultimately 600 pixels by 300 pixels. The number 5 which you see was converted to curves instead of being kept as text.

Once I export, and save an .html file in doing so, a browser opens showing me that my artwork has survived the translation. If I open the .html in Notepad I may see the JavaScript which crafts the visuals I see in the browser. It all happens by way of drawing on a Canvas. The artwork is indeed 600 pixels by 300 pixels and comments break up the code along the divides that once were layers back in Illustrator.

If you're like me, you've just jumped from mildly impressed to really impressed and you're imagining how you'll actually use this at work!