In part 1 of this article, I introduced some of the difficulties in converting SVG graphics to WPF XAML. These included inconsistent implementations across SVG editors and the lack of a high quality XAML export. I also introduced two methods for the conversion of vector graphics to XAML. The first uses Adobe Illustrator and the second makes use of free standalone program called XamlTune. In this article will take a detailed look at the first of these methods. In part 3, we will look at the second method.
Method 1: Adobe Illustrator
When working on most vector graphics projects, there is really only one software program that really matters: Adobe Illustrator. While I'd like to say it is the 800 pound gorilla in the room, it is probably more accurate to say it is the only gorilla in the room. Given its near omnipresence in the artistic community, it is hugely convenient that there is a highly capable plug-in which can export high quality XAML directly from Illustrator.
Installation of the plug-in is simple and straightforward. You can find it at MikeSwanson.com, under XamlExport. After it has been downloaded, unzip it to the Illustrator Illustrator plug-in folder. For a Windows default installation of Create Suite CS3, the path is C:\Program Files\Adobe\Adobe Illustrator CS3\Plug-ins. If you don't have access to the administrator account on your computer or if you prefer to install to an alternate location, that is also possible. Go to Edit > Preferences > Plug-ins & Scratch Disks and put a check in the "Additional Plug-ins Folder." You can then specify a folder other than the default.
Once you have copied the XAMLExport.aip file to the proper folder, you will need to restart Adobe Illustrator. The export to XAML option can be found under File > Export. There will be options to export to both Windows Presentation Foundation XAML and Silverlight XAML. The export plug-in works with Adobe Illustrator CS, CS2 or CS3.
Using the plug-in, it is possible to export any file which Illustrator is capable of reading. This includes AI files, Illustrator compatible SVG files, and PDF files. The size of the exported images is adjusted by changing the document properties, found under File > Document Setup.
While the plugin will work on all file types, not all of the features of Adobe Illustrator are supported. Mark Swenson gives a detailed list at the download site, but there are a few import limitations that should be mentioned.
- Text Export. In the current implementation, there is no support for WPF native text rendering. While it is possible to work around this limitation by choosing Select > Object > Text Objects then changing the text to an outline prior to performing the export (Type > Create Outlines), this is an imperfect solution.
- Raster Images. There is no support for raster images that are part of the AI image. Illustrator images that incorporate any Photoshop documents or other bitmap style objects will not export correctly.
- Illustrator Meshes. Illustrator meshes cannot be exported and will be ignored in the final output.
While the lack of text and raster image support prevent the export plug-in from rendering XAML that is 100% identical to the source image, it nonetheless produces high quality output from most Adobe Illustrator objects. I experimented with a number of logos and design elements with generally good results, though there were some issues with complex paths and gradients. Some examples are shown below.
In the first example (Figure 1), I have used a simple logo from the Scientific Computing Institute (SCI) at the University of Utah. A screenshot of the original as it appears in Illustrator is shown (top left panel) as well as two different exports. The first time I performed the export (seen in the top right panel), I did not first convert the text elements to outlines. As a result, the lettering was not converted to XAML correctly. In the second export (bottom panel), I converted the lettering to an outline prior to the export.
Figure 1. Original SCI Logo (top left) and XAML Export from Adobe Illustrator. In the first instance (top right), the text was not changed to an outline prior to export. As a result, it was ignored. In the second instance (bottom), the text was transformed prior to export.
In a second example (Figure 2), we see an example where an icon contains unsupported elements. While most of the image is faithfully rendered, there are two major issues. First, an error occurred when rendering the color of the inner path, which is supposed to white. This region appears as an off grey in the XAML. There was also an issue with the beautiful blue to violet gradient on the left of the image. In the XAML, it is rendered as a single color.
|Figure 2. Amarok Icon. The image at left shows the original artwork in Adobe Illustrator and the image at right shows the exported XAML. There are two problems in the export. The center path is no longer white and the blue to violet gradient now appears as a solid band of light blue.|
Figure 3 shows a particularly complex example which was rendered without any issues. The original image was created from a photo using Illustrator's LiveTrace feature. The image contains hundreds of individual paths, gradients and other elements. Yet, despite its complexity, it was rendered to XAML without problem.
|Figure 3. XAML export of an Illustrator LiveTrace Image. Even though the image contains hundreds of paths and complex elements, the XAML export is an extremely good representation of the original image.|
The XAML exporter plug-in provides high quality XAML directly from Adobe Illustrator without requiring any intermediate steps. This is convenient due to the near omnipresence of the Adobe products among artists and designers. However, the plug-in also has some serious limitations. It is not able to export native text and may have issues with complex gradients.
In Part 3, I will look at using XamlTune, a standalone converter utility.
Acknowledgements, References and Further Reading
The logo of the Scientific Computing Institute is copywrite (2008) by the University of Utah. It may not be used for commercial purposes without written permission from the University of Utah. The Oxygen Icon Theme is dual licensed under the Creative Common Attribution-ShareAlike 3.0 License as well as the GNU Lesser General Public License.
- WPF – SVG Graphics and XAML – Part 3
- WPF – SVG Graphics and XAML – Part 1
- Backup, Sync and Share – Part 5.2: Windows Vista Backup (Disaster Prevention)
- Learning IronPython – Part 5 – A Rudimentary Download Manager
- A Better Previous Versions: Time Traveler