[ Main Page | Download | Eye Candy | Contact ]

A freely available plug-in that enables Adobe® Illustrator® to export WPF and Silverlight compatible XAML
Created by Michael Swanson

Introduction

For working with XAML files, Notepad is great; I use it almost every day. XAMLPad (from the Windows SDK) is even better. But neither of them are built for serious graphic design work. Most professional designers are very familiar with Adobe's venerable suite of tools, and a large percentage of them use Illustrator. So, I decided to spend some time investigating what it would take to build a plug-in for Adobe Illustrator that exports to XAML. Well, like a lot of software prototypes, it just kept growing. And growing. And growing. Now, after spending more than a few evenings trying to re-learn the C++ I'd forgotten some five years ago (I love C# and managed code even more now!), I've ended up with a very useful tool.

The tool may be a little rough around the edges. This is my first attempt at an Adobe plug-in, and although I don't expect it to crash Illustrator, who knows what can happen? :-)

For a quick walk-through of the plug-in, you may want to watch this 25-minute Channel 9 interview.

Goals

While building the plug-in, there are a few general goals I keep in mind:

Installation

The current version of the plug-in requires Adobe Illustrator CS, CS2, or CS3 running on Windows. If you're using an older version, or if you'd like to test-drive the plug-in, Adobe offers a free 30-day tryout edition of Illustrator CS3. Once you have a compatible version of Illustrator installed:

The next time you start Illustrator, you should be able to pull down the File menu, select Export..., and see both Windows Presentation Foundation XAML (*.XAML) and Silverlight XAML (*.XAML) as available selections under Save as type. There are no other options to configure or runtimes to install.

If you've associated the .XAML file extension with an application in Windows, hold down the left shift key during export to launch the XAML file in your default viewer. For a typical installation, this should launch Internet Explorer.

Features

Here is a list of features that are supported by the current version of the plug-in or are planned for a future release. Where there are issues or workarounds, I've tried to address them in the Comments column. If you'd like to see some visual illustrations of these features and some of their limitations, take a look at the Eye Candy.

Support Feature Comments
Yes XAML Export The plug-in adds Windows Presentation Foundation XAML (*.XAML) and Silverlight XAML (*.XAML) as available types in the File/Export menu of Illustrator.
Yes DrawingBrush Format Drawings are smaller and faster than shape objects, because they offer fewer features. If you're going to use your Illustrator artwork to define the look of a single UI element (like an icon), then it probably makes sense to use the DrawingBrush format to fill the icon with the exported XAML. If you're unclear about the differences, it's worth reading the Drawing Objects Overview and Shapes and Basic Drawing in WPF Overview from the Windows SDK documentation.

To export to DrawingBrush format, hold down the right shift key during export.
Yes Path Support Exports arbitrarily complex paths (open/closed) and compound paths with Non-Zero and Even-Odd fill rules.
Yes Stroke Supports stroke color, thickness, join type (Miter, Round, Bevel), line cap type (Butt, Round, Projecting), and dash style. There are some conversion issues with mitered join types that appear to be related to a difference in the way Illustrator and WPF respect miter limits. This may be addressed in a future version.
Yes Gradients Supports both linear and radial gradients with any number of stops. Illustrator supports customizable mid-points that are now converted to extra stops.
Yes Opacity Element transparency/opacity is fully supported.
Yes Color Management Uses Adobe's color management system to convert between Illustrator (gray, CMYK, RBG, etc.) and WPF colors. The current version of the plug-in has some color accuracy issues, so you may notice slight variations.
Yes Layers and Groups Illustrator layers and groups are exported as individual Canvas elements. The XAML container type may become a configurable option in a future version.
Yes Clipping Masks Supports Illustrator clipping masks. Although the Illustrator SDK seems to indicate that a clipping path cannot not have a stroke or fill, I've run across sample files that do, and the rendering order is odd. An identical result can be achieved in WPF, but the current plug-in does not handle this edge case.

Note that clipping masks do not currently work when exporting to DrawingBrush format.
Yes Pathfinder/Compound Shapes If you use the Pathfinder feature in Illustrator to build compound shapes, they are supported. Currently, only the result is exported. In the future, it would be nice to export the actual components and let WPF and Silverlight combine them.
Yes Blends Full support for all blends. Interestingly, elements that blend their opacities appear to display "correctly" in WPF and Silverlight, but not in Illustrator.
Yes Envelope Distortion Distorting a shape or text with an envelope is supported. Envelopes can be warps, meshes, or user artwork.
Yes Element Visibility Hidden objects in Illustrator are exported to the XAML file with their Visible attribute set to "hidden". This fails in a few cases, and it can be fixed in the future. There will probably be a user option to eliminate exporting hidden objects altogether.
Yes XAML Comments Exports Illustrator element "paths" to XAML comments (e.g. <!-- <Layer 1>/<Compound Path> -->).
Yes XAML Preview Not really a "preview," but if you hold down the left shift key during the export, the XAML file will be launched in your default viewer. This will probably become a selectable user option in the future.
Yes Abbreviated Path Syntax Currently enabled but possibly a user option in the future. XAML abbreviated path syntax is used to reduce the exported file size.
Future? Meshes Not currently supported. I'm not sure how to reliably export meshes to WPF or Silverlight vector elements. If direct support is not possible, the plug-in may have to rasterize them which is certainly not an ideal solution.
Future Raster Images No current support, but should be trivial to add in a future version.
Future Native Text Dropped initial (and very limited) support for exporting to native WPF and Silverlight text. Illustrator leverages a powerful text engine, so it should be possible to export a very high-fidelity representation of the text in a future version.

To export text, choose Select/Object/Text Objects in Illustrator, then select Type/Create Outlines before performing the export.
Future Pattern Fills Illustrator supports pattern fills. These are not currently exported, but they certainly can be in a future version.
Future Symbols No current support but will be added in a future version.
Future Opacity Masks Not currently implemented, but possible.
Future Image Effects Recent versions of Illustrator support Photoshop (bitmap) effects like Gaussian Blur. These features are not currently exported.
Future Configurable Precision Point data is currently exported at a very high precision which increases the size of the exported XAML file. It would be nice to be able to configure the precision in a future version.
Future Resources Nothing is currently exported as a resource. This would be a great future addition, and it could potentially help reduce the exported file size.
Future Points to DIPs Currently, no conversion is done between points (1/72) and WPF device independent pixels (1/96). However, almost everything is expressed as relative ratios, so this doesn't present many practical problems. Can be fixed in a future version.
Future XML Encoding No current support for XML-encoding special characters, so watch your element names in Illustrator!
Future XAML Name No current support for exporting a XAML Name attribute. Future version may export a filtered version (e.g. minus spaces) of the Illustrator element name.
No Stroke Brushes Illustrator allows brush shapes to be stroked along a path. WPF nor Silverlight have support for this feature.
No Animation No animation, since Illustrator doesn't support animation.
No Path Alignment Illustrator allows strokes to be aligned to the center, inside, or outside of a path. All strokes are exported to what would be the equivalent of center. WPF nor Silverlight support any other model.
No Graphs Illustrator can create Graph objects. These are not exported and probably won't be in the future.

Tools

For a list of other tools that help create, edit, and/or convert XAML content, check out the WPF Tools and Controls page on my blog.

Feedback

If you have feedback, comments, or questions regarding the functionality of the Adobe Illustrator to XAML export plug-in, please contact me directly.

Have fun!