[ 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

If you use Adobe Illustrator and would like to get your artwork into a WPF or Silverlight application using XAML, you've come to the right place. I've been updating my freely available plug-in since 2005, and there are now versions that work with both the PC and the Mac.

While the plug-in is capable of exporting very complex illustrations, in practice, it is mostly used to convert individual icons or user interface elements. Once assets have been exported from Illustrator, they can be used in a tool like Blend for Visual Studio to build a finished application. If you're just learning to work with XAML, I highly recommend that you download the fantastic (and free) Kaxaml editor by Robby Ingebretsen. Of course, any standard text editor will also work fine.

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

Updates

I generally post to my blog whenever there's news to share. Here's a list of posts that relate to the Illustrator plug-in:

Installation

Installation of the plug-in is simple: download the zip archive, then extract the appropriate version to your Illustrator plug-ins folder. If your version of Illustrator is too old, or if you'd like to test-drive the plug-in, Adobe offers a free 30-day trial edition of Illustrator.

PC (Windows) Mac (OS X)

The PC version of the plug-in requires Adobe Illustrator CC 2014.1. Once you have a compatible version of Illustrator installed:

  • Download XAMLExport_0.2.zip (361KB).
  • Copy XAMLExport64.aip (64-bit version) or XAMLExport32.aip (32-bit version) from the zip file to your Illustrator plug-ins folder. For a default installation of Adobe Illustrator, this should be something like C:\Program Files\Adobe\Adobe Illustrator CC 2014\Plug-ins.

The next time you start Illustrator, you should be able to pull down the File menu, select Export..., and see both XAML for Silverlight (*.XAML) and XAML for WPF (*.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, hold down the left shift key during export to launch the XAML file in your default viewer.

The Mac version of the plug-in requires Adobe Illustrator CC 2014.1. Once you have a compatible version of Illustrator installed:

  • Download XAMLExport_0.2.zip (361KB).
  • Copy XAMLExportMac.aip from the zip file to your Illustrator plug-ins folder. For a default installation of Adobe Illustrator, this should be something like /Applications/Adobe Illustrator CC 2014/Plug-ins.

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

Unlike the PC version, there is currently no support for launching the exported XAML file by holding down a key.

Features

Here is a list of features that are supported by the current version of the plug-in. 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 PC and Mac Support Versions of the plug-in are available for PCs running Windows and Macs running OS X.
Yes XAML Export The plug-in adds XAML for Silverlight (*.XAML) and XAML for WPF (*.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 using a PC, hold down the right shift key during export. On a Mac, hold down either the right shift key or the left shift key (they have the same behavior).
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.
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.
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, the result is exported.
Yes Native Text Native text export was unavailable in early versions of the plug-in, but it is now supported. There are occasional baseline alignment issues, and only "point text" is exported (text along a path is not supported).

To export the shapes of text along a path (or for another reason), choose Select/Object/Text Objects in Illustrator, then select Type/Create Outlines before performing the export.
Yes Symbols Currently, each symbol is exported and placed individually. In the future, it would make more sense for symbols to export as entries in a ResourceDictionary.
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.
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 export on a PC, the XAML file will be launched in your default viewer. Note that this functionality is not available with the Mac version.
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.
Future Pattern Fills Illustrator supports pattern fills. These are not currently exported.
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 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 or x:Name attribute. Future version may export a filtered version (e.g. minus spaces) of the Illustrator element name.
No Stroke Brushes IIllustrator 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.

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!