WPF – SVG Graphics and XAML – Part 2

 | December 14, 2008 1:34 am

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

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.

Plug-In Use

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.

  1. 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.
  2. 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.
  3. 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.

Examples

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.

 

Summary

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

Further Reading

There is 25 minute video which explains the basic use and function of the XAML export plug-in. It is hosted on MSDN Channel09.

Legal Acknowledgements

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.

Similar Posts:

3 Responses to “WPF – SVG Graphics and XAML – Part 2”

[...] Art and Photography « WPF – SVG Graphics and XAML – Part 2 [...]

stelt wrote a comment on December 17, 2008

But why convert?
What does it bring besides lock-in ?

RobertSOakes wrote a comment on December 18, 2008

@Stelt. These are excellent questions. I will try my best to give good answers.

First, "Why Convert?"

The answer to this question is a direct beneficiary of the OpenSource idealogy inherent in projects like KDE. In short, it sums to: Because I can.

Let me expound. Windows Presentation Foundation is a very nice technology for building a GUI on the Windows platform. It completely separates the UI from the program model (as I was taught to do in my programming classes once upon a time). While there are other cross platform technologies (Qt, Gtk, wxWidgets, etc), I have found them to have a very steep learning curve and integrate a little too deeply into my program model for comfort. This can lead to massive amounts of time wasted. While I have participated only peripherally, the SCI Institute has recently been trying to disentangle its flagship product, SCIRun, from a number of nasty dependencies. Some poor design choices 5 or 6 years ago have required massive re-writes that have stagnated their ability to work on new things.

So, while WPF is attractive, the lack of high quality art available is not. I lack the resources to commission art for my personal projects. Each icon might cost $100 or $200. This is where converting the existing SVG libraries becomes attractive. If it s possible to use existing OpenSource libraries (with permissive licenses of course), then I can greatly improve the appearance of my application.

I also am not sure how converting SVG resources to XAML furthers lock-in. I try and look at it from both the designer and developer viewpoints. From the develoepr's vantage point: The choice of a GUI toolkit for the most parts locks the program to that technology for at least one or two releases. In fact, by choosing WPF, I am actually making design choices that will make it easier to migrate to a new technology in the future (as compred to Qt or wxWidgets, say). From the designer's viewpoint: the conversion of SVG to XAML resources promotes reuse of the assets and opens the art up for use on a completely different platform. This, by definition, is the antithesis of lock-in.

As I need high quality art, the OpenSource ideals of projects like Oxygen are a huge benefit. They allow me to use their art, so I do. I agree to commit back the new assets, and it is hopeful that even more people will benefit.