File Under: HTML5, Software

Export Adobe Illustrator Drawings and Animations to HTML5

There’s a new conversion tool for fans of Adobe’s popular Illustrator desktop publishing app that lets developers export their vector drawings and animations as HTML5 code that runs natively in the latest web browsers.

The new tool is called Ai>Canvas, and it does exactly what the name implies. You can take any vector illustrations you’ve made in Adobe Illustrator and export them as 2D graphics that can be drawn on web pages using the HTML5 Canvas element. It can even animate your drawings.

The plug-in can handle gradients and transparencies, complex pattern fills, drop shadows, complex line styles and text, exporting everything as HTML5 Canvas code. In cases where your illustration contains something that can’t be done in Canvas (like an opacity mask) the plug-in rasterizes that bit and positions it properly.

The plug-in also supports commands for animation. You can add rotation, object scaling, fades, and movement along a path. All of your parameters are defined inside Illustrator, but when you export to HTML5, you can tweak the resulting web code to fine-tune the results. You can also add interactions, like sounds, or click events.

The plug-in works in Illustrator for Creative Suite versions 5, 4 and 3. There are versions for Windows and Mac OS X.

Oddly, it doesn’t come directly from Adobe. It’s a product of Microsoft’s Mix Labs, an initiative the company has set up to experiment with open web technologies. Microsoft has taken a larger interest in open web standards ever since work began on building in support for HTML5 and advanced web technologies into Internet Explorer. The next version, IE9, is already in beta, with the final version due some time next year.

The creator of the plug-in, Microsoft developer and platform evangelist Mike Swanson, is also the author of the XAML exporter for Illustrator. He got interested in HTML5 and Canvas after a passionate conversation about the technology with his co-worker, Thomas Lewis. You can read the whole story — and see some of his working examples and test files — on Swanson’s blog. Lewis has written his own post, as well.

Adobe Labs recently released an SVG pack for Illustrator which can export drawings as SVG that run in browsers that support the format. But this new Ai>Canvas exporter uses HTML5 Canvas, which is quickly becoming widely adopted by developers working on games and virtual worlds that run in the browser. Check out the Asteroids and Rumpetroll experiments for some cool Canvas work.

See also: