| December 16, 2008 6:49 pm

As described in part 1 of this article, vector graphics offer a tremendous number of advantages over their raster counterparts. These benefits include the ability to enlarge the image to any size without a loss of detail or quality and better reproduction in both print and online form. Combined with the existence of many high quality icon libraries, vector graphics represent a valuable source of art for desktop applications.

In part 2 of this article, we looked at a way to convert vector graphics using Adobe Illustrator. While useful, the XAML export plug-in has a number of limitations and is not always able to faithfully convert the image to XAML. Thus, while Adobe Illustrator is a good conversion method when working directly with artists and graphic designers who are able to provide art files in Adobe Illustrator (AI) format, it is not so well suited to existing OpenSource libraries which tend to be distributed in the SVG format.

Due to their use of alpha transparency, Adobe Illustrator is always able to read the images from other editors, though it contains basic SVG support. This is unfortunate as these icon libraries, such as the Oxygen Icon Set, are freely available under permissive licenses. Fortunately, there is a way to overcome some of these limitations. In this article, I will look at how to convert SVG icons to XAML using the stand-alone utility XamlTune. We will also be using the OpenSource SVG editor, Inkscape.

SVG Icon Sources

Prior to delving into the process by which SVG can be converted to XAML, I thought it might be good to take a minute and highlight some excellent sources of high quality SVG art. These include a number of general resources as well as dedicated SVG libraries.

Wikimedia Commons

One of the better art libraries can be found at Wikimedia Commons. It includes an enormous number of public domain and free-licensed media content with a healthy section of SVG images. Some of the more popular examples include the Nuvola and Bluesphere themes. The database of images is both searchable and browseable.

While the vast majority of the images are available in the public domain or under permissive licenses, it is important to read the specific license of each image which will be used. Even when using OpenSource artwork, the type of license is important. Images released under the GPL cannot be used in commercial projects, for example.

Figure 1. Sample images from the Nuvola theme at Wikimedia Commons

Oxygen

The Oxygen icon theme is the default icon set for the KDE desktop. The sample artwork at the beginning of each of the parts in this series were taken from the Oxygen project. The set is licensed under both the LGPL and Creative Commons, as a result, it can be used in both commercial and OpenSource applications. There are a huge number of individual icons which cover actions, file types, and applications. Thus, between its beauty and permissive license, in addition to the fact that it is available in svg format, Oxygen is an ideal source of artwork. The Oxygen theme will be the source of the art used in this tutorial.

Figure 2. Sample images from the Oxygen icon set.

In contrast to the icons available at Wikimedia Commons, however, the Oxygen Icons can only be downloaded via Subversion. You will thus need either need to download the command line toolset, or a GUI client like TortoiseSVN. The Oxygen icons can be found at:

    svn://anonsvn.kde.org/home/kde/trunk/KDE/kdebase/runtime/pics/oxygen/

If you are working from the command line, go to the directory where you would like to save the icons., then type:

    svn co svn://anonsv.kde.org/home/kde/trunk/KDE/kdebase/runtime/pics/oxygen Oxygen

The icons will be downloaded to a folder called ‘Oxygen.’ If you want to only download the SVG versions of the icons, use:

    svn://anonsvn.kde.org/home/kde/trunk/KDE/kdebase/runtime/pics/oxygen/scalable

Method 2: Inkscape and XamlTune

Installation

To convert SVG icons using XamlTune is a two step process. You will need to have both Inkscape and Xamltune. A Windows Installer for Inkscape can be found here. XamlTune can be downloaded from its CodePlex download page. Click on the “Download Now” button on the right part of the page.

After XamlTune has downloaded, you will need to extract the binary and supporting libraries to a folder. It does not have an automatic installer. To run XamlTune, double click on XamlTune.exe. Alternatively, there is also a WebApp version, which can be found here. The in this tutorial were converted using the desktop application.

Program Use

XamlTune is only able to convert well-formed SVG to XAML. When I tried converting compressed SVG (svgz), it caused the program to crash. Thus it is very important to make sure that they are plain, vanilla SVG. If they were created by Inkscape, Krita, or OpenOffice Draw this is likely not the case. All three programs use markup not part of the SVG standard to properly render and edit the images. While this additional markup is ignored by viewers, it may cause a converter to crash.

Convert SVGZ to SVG

The first step is to then convert the distribution format to vanilla SVG. To do so:

  1. Open Inkscape and load the file. 
  2. Choose File > Save As
  3. Select the destination and provide the name of the file. In the list of file types, choose Plain SVG and then click “Ok.”

Conversion to Xaml – Desktop Application

The XamlTune UI includes two windows, which are shown in figure 3 below. The first window is used for input and the second window is used for output. You can either cut and paste the SVG into the text box or load it from file. The second window contains the conversion options, the converted XAML, and a preview of the converted image. It is possible to convert to both WPF and Silverlight XAML.

Figure 3. The XamlTune User Interface. There are two windows in the XamlTune UserInterface. The first is used for the data. The second window includes the conversion options, the converted XAML text and a preview of the converted image.

Once the image has been converted, it can be saved to the active directory by typing a filename and clicking the “Save” button. You will need to add the .xaml, as this is not done by the program automatically.

Examples

The examples below show images that were converted with XamlTune from plain SVG. In each case, there were significant differences between the source image and the converted XAML. The most common discrepancies were seen in shadows and complex gradients which used alpha transparency. I also noticed problems in images which made use of extensive typography, however.

The first example (Figure 4) is a beautiful rendering of a newspaper. It includes a number of complex gradients and makes extensive use of typography. In the exported XAML, many of the gradients were not correctly exported nor was the text.

Figure 4. The top panels show how the original SVG image appears in Inkscape. The detail at right has been zoomed to 400% of the original size. The bottom panel shows the XAML created by XamlTune. While most of the gradients and much of the illustration was converted without difficulty, the fonts and type were ignored.

In the second example (Figure 5) shows similar issues as the first. The color effects on the controls in addition to the shadows were not correctly exported. Other elements were shifted from their original location, which suggests that there may be an issue in keeping track of coordinates.

Figure 5. In this example, it is possible to notice some distortion in the converted Xaml. Some of the gradients were not properly converted and some of the controls have shifted location. The shadows have also not been correctly rendered.

In this third example, we see a complex example with gradients, shadows and lettering. Again, there are major discrepancies between the source image (left) and the exported XAML. In addition, there is also some distortion of the chip body.

Figure 6. As in previous examples, there are some major inconsistencies between the source image and the converted XAML. Shadows and some gradients did not transfer correctly. The background image of an X on the top of the chip was also omitted.

Conclusion

Much like XAML created with the Adobe Illustrator plug-in, there are often discrepancies between the source SVG and the final image. XamlTune struggled to consistently portray complex gradients (making use of alpha transparency) as well as to properly render shadows. Simpler images which lack these elements appeared to export without distortion. While not a perfect solution, both techniques allow for SVG assets to be converted to XAML and used in both WPF and Silverlight applications.

Comments

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

stelt wrote a comment on December 17, 2008

great SVG images

Petru Avram wrote a comment on February 13, 2009

Why did you not use save as xaml directly from Inkscape?

Rob Oakes wrote a comment on February 13, 2009

@Avram. At the time that I was working with Inkscape and writing the article, the XAML export option was horrifically broken. It included a number of missing or incomplete tag elements which couldn’t be interpreted by the parser. I filed bug reports and attempted to get in touch with the developers, but I never heard back. To be fair, I also haven’t gone back to see if more recent builds have fixed the bugs.

Fernando wrote a comment on April 3, 2009

Exellent article, do you know any way to export directly WPF Canvas to SVG.??
I need know how, thanks by your time.

Care to comment?