Adventures From SVG to XAML

As huge fan of ribbon interface it was just a matter of time before I started playing with WPF flavored version. First thing that became obvious is that my standard toolbar bitmaps are not good anymore.

My default 16x16 icons looked slightly blurry on higher DPI settings when used in Windows Forms applications and I didn’t mind it much. Same icons in WPF looked just plain awful. I spent some time playing with various settings to get better results but even best settings could not hide fact that bitmaps were used. It was quite obvious that vector-based icons were what I needed.

There are some free XAML toolbar icons available but any meaningful project will have problems finding right (free) icon for the job. Since there is quite a selection of free SVG icons, thought came about converting one into another. How hard it can be to convert one vector drawing into another one.

I decided to test this on various media buttons since that was exactly what I needed for one project.

First thoughts went toward InkScape. This is great vector drawing tool with option to save files as XAML. Resulting file used canvas for positioning various elements and thus it was not possible to use it as ribbon image. Simplest solution failed me.

Another solution was exporting file in PDF and then importing that into Expression Design and exporting it as XAML. It worked. However, results were less than satisfactory. All gradients were rendered as image instead of vector. Scaling picture didn’t quite feel right.

I spent better part of night and nothing quite worked.

Best results that I got were with Svg2Xaml library. It is LGPL project in very early phase (version 0.2) of development but I do not see any alternative library that is half as good.

Examples included with that library are quite good but I decided to create another one just for fun. As always, result of that tinkering is available for download.