WPF – SVG Graphics and XAML – Part 1

 | December 13, 2008 7:35 pm

In a perfect world, most would be judged on the quality of their ideas and depth of character. However, more often they are judged by looks and dress.  What is true in the world of people is also true in the world of software. More than one website, computer program, or presentation has suffered because it is unattractive. In the inevitable fight between style and substance, substance often exerts more than its fair share of influence.

Given the importance of stylistic presentation, it is somewhat ironic that one of the most neglected components of many software projects it that of the artwork. While the code may be carefully vetted and analyzed, often icons and other artwork are chosen at the last stage of the design. While this might be unfortunate, it is due to an important reality: high quality artwork can be very, very expensive.

Fortunately, there are a number of beautiful graphics libraries that are either cheap or free of charge. Most are available under permissive or OpenSource licenses and can even be used in commercial products. There is just one problem; nearly all of these libraries are available in formats which don't play nicely with WPF and XAML. With a little bit of planning and strategy, however, it isn't too difficult to use these resources in your own applications.

Working with Vector Graphics

While there are a huge number of beautifully done vector graphics, it is important to understand a few basic things about vector images prior to working with them. These include how they are both similar to and different from traditional graphics formats, as well as some practical limitations and realities. It is also important to know which programs you will be working with. SVG vector graphics created in one program can't always be opened in another editor.

Traditional Image Formats Versus SVG: What Are the Differences?

Anyone who works with computers is familiar with the familiar types of image formats: jpeg, png, bmp, etc. These are the file types that come from digital cameras, scanners, and raster based graphics programs (such as Photoshop). A raster graphic is composed of a collection of (usually) rectangular pixels. In black and white images, there is value at each pxiel that describes the intensity. A value of zero corresponds to black while large values correspond to white. Values in the middle are differing shades of grey. Color images, in contrast are coded by values that correspond to red, green, or blue. These disparate values are then mixed to arrive at the final shade. Programs such as Photoshop and the GIMP edit the individual pixel values.

Figure 1. Example of a Raster Based Graphic. Raster images are composed of arrays of pixels. At each pixel location, there is a value that corresponds to the color of the pixel. Image Source: Wikipedia.

Raster images are dependent on the resolution which they are displayed. As can be seen in the example (Figure 1), the image looks better at low resolution. When it is enlarged to a high resolution, it becomes blurry.

In contrast to raster images, vector images are based on mathematical models. They combine different geometrical elements (such as points, lines, curves, shapes, etc) to describe the shape and color of the final drawing. They also make it easier to use a variety of advanced filters and processing tricks to generate effects such as transparency or light.

Vector images also offer another important benefit over raster images. They can be enlarged without a loss of quality. Figure 2 illustrates this point; it show how a vector image appears when it is enlarged. A bitmap, enlarged to the same size, is also shown for comparison

Limitations and Realities

While SVG has been adopted as an official W3C standard, it has never been really endorsed by any of the major software developers (which is ironic since it was initially developed and advocated by Adobe). This has led to a large number of parallel implementations, on both the proprietary and OpenSource sides of the fence. In addition to parallel implementations, SVG has suffered from limited penetration. The most common type of vector graphics in the art world isn't SVG, but rather the native file format of Adobe Illustrator, AI.

To further complicate things, many of the programs which read SVG files support different parts of the specification. While Adobe Illustrator can export directly to XAML through use of a plugin, the most common version of Illustrator (CS3) uses a rather basic implementation of the SVG standard. It lacks support for alpha channels and other advanced features, which makes it impossible to open images from other SVG editors.

It doesn't get much better from the OpenSource side of the fence either. File conversion and portability might charitably be described as "promising." The most popular editor, Inkscape, implements most of the features available in the WC3 standard; it doesn't, however, play nicely with other programs. It includes its own extensions to the file format. While these extensions should effect image portability in theory, I found otherwise in practice. In multiple tests, I was not able to export images to a format which could be read by Illustrator or other OpenSource editors. And while Inkscape has a plugin to export XAML directly, the output is garbled and unusable. Other OpenSource programs, such as OpenOffice Draw and Krita, offer only very basic support for the file format and are still under active development.

Figure 2. Example of a Vector Based Graphic. Vector graphics are composed of different geometrical shapes (points, lines, curves, etc) to describe the shape and color of final image. Vector graphics can be scaled to any size without losing any quality. Image Source: Wikipedia.

Microsoft is hardly a champion of interoperability either. There is only one program which can read and write XAML files directly; Microsoft's own Expression Suite. In a rather egregious oversight, the Expression suite lacks an easy way to import SVG and directly convert it to XAML.

So while WPF includes support both raster and vector images, many of the more advanced features of WPF (including resolution independence) really need vec tor graphics to function properly and getting the more common SVG file formats (.ai and .svg) converted to XAML can be difficult.

The Solutions

Luckily, however, there are two ways to successfully convert SVG to XAML. Determining which method to use largely depends on the source of the file.

  1. The first uses an Adobe Illustrator plugin to export AI files too XAML. This method should be used when working with professional artists or graphic designers (who are likely to use the Creative Suite of Applications).
  2. The second makes use of a free standalone program (XamlTune) to convert properly formatted SVG to XAML. This process makes the most sense when using existing OpenSource libraries or other freely available samples.

In the next article in this series, I will look at these two methods in depth.

_____________________________________________________

Acknowledgements, References and Further Reading

Additional Reading

There is an overview of why WPF uses a different specification than SVG to display vector graphics on Jon Galloway's blog.

Mike Swanson, author of the XAML Adobe Illustrator Plugin, has a dedicated page which describes the installation and limitations of the plug-in. This includes a sample gallery with a number of complex examples.

On UXPassion, there is a tutorial about how to convert to XAML using a PDF intermediary.

Legal

The image examples in this tutorial were taken from Wikipedia and are available in the Public Domain. The logos and images of the Scientific Computing Institute (SCI) are copyrighted (2008) by the University of Utah. They 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 1”

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

[...] described in part 1 of this article, vector graphics offer a tremendous number of advantages over their raster [...]

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.