XamlTune just got a little better

XamlTune is a fab utility for converting SVG to XAML. It's one of the best things going for conversion from Adobe Illustrator to XAML.

Unfortunately, like all SVG-to-XAML converters, it's flawed in various ways.

I've just released my second patch for XamlTune, which fixes a few more of the flaws and makes Adobe Illustrator to XAML conversion that much easier again.

(You can download my XamlTune patches here.)

Key fixes:

• SVG shapes (circles, ellipses, etc) that have a transformation matrix, now convert correctly. Woot! (The trick was to convert them into XAML Paths instead of XAML shapes.)


• SVG circles are now converted into XAML Ellipses, instead of being converted into XAML Paths. (But if the circle has a transformation matrix, we stick with XAML Paths, as per the previous point.)

XamlTune has cost me a few days of debugging work (i.e. debugging XamlTune), but it has saved me much more time than that with an already extensive SVG-to-XAML conversion framework. I am glad to be able to contribute my bug-fixes back to the project and help it help others more.

Enjoy! :o)

Convert Adobe Illustrator files to XAML via SVG

There are lots of ways to convert Adobe Illustrator files to XAML, but for my needs, none of them were quite good enough.

The Adobe Illustrator XAML-export-plugin was mucking up some of our line art.

InkScape's built-in XAML support was mucking things up even worse. (I LOVE InkScape, but its XAML support is still not as good as hopefully it will be one day...)

XamlTune was mucking up a few things here and there as well.

Anyhow, I discovered that, for our line art, the main problem with XamlTune was its handling of thick strokes on ellipses. I fixed the XamlTune source code, submitted a patch, and now, voila, XamlTune is converting our line art perfectly! (Or at least, my eye notices no deficiencies.)

Here are the steps I'm taking:

1) Open the Adobe Illustrator file in Adobe Illustrator. (A free 30 day trial is available.)

2) Save a copy as an SVG document. (There are lots of SVG options, but at least for us, the default SVG options work fine.)

3) Use XamlTune to convert from SVG to XAML.

I doubt my patch will be integrated into the main XamlTune source in a hurry, so if you have enough technical nouse, get my patch from the XamlTune CodePlex site and enjoy the benefits. :o)

Your mileage may vary - apparently SVG to XAML conversion is not good at handling gradients, but all our line art is just simple sets of lines, paths and shapes, so that hasn't been a problem for us...

XAML stroke - inconsistent, but livable if you know the tricks...

I'm using XamlTune to convert SVG to XAML. Ellipses with thick strokes weren't converting correctly. I dug deeper, and discovered that XAML is inconsistent in its treatment of stroke placement.

For paths, the stroke is centred on the path line (as with SVG). But with ellipses and rectangles (and hence circles and squares too), XAML draws the stroke INSIDE the perimeter line. SVG is consistent - the stroke is always centred on the perimeter line.

Anyhow, I had difficulty finding info on this anywhere, so I tested my theory with some practical examples.

In XAML, create an Ellipse with e.g. a 100 pixel diameter.

<Ellipse Width="100" Height="100" Fill="Yellow" />

Then set a very wide stroke:

<Ellipse Width="100" Height="100" Fill="Yellow" StrokeThickness="50" Stroke="Blue" />

Voila! Note that the size of the circle is the same whether there is a stroke or not. Thus, XAML uses an internal stroke for ellipses.

But do the same thing in Inkscape (i.e. in SVG) and the circle gets larger as the stroke gets wider.

Since I found it hard to find anyone else commenting on the same "gotcha", I thought I'd make note of it here...