Converting vectors to XAML Paths

The process of converting an SVG is a bit convoluted, but stay with me.

We first need to convert the SVG into an Adobe Illustrator file — don’t worry if you haven’t sold your house to pay for an Adobe Creative Cloud subscription, it’s not necessary here.

(If you’re looking to convert an AI then you can obviously skip this part.)

Open your SVG in a vector editor like Inkscape.

Inkscape is a probably the best open source vector graphics editor around.

2. Save your SVG as PDFs.

File > Save As > Save as type > PDF

3. Close Inkscape and navigate to where you saved this PDF.

4. Right click on your file and append “.ai” to the file extension. If you are converting image.pdf your file should now be image.pdf.ai.

Rename your PDF to add the Adobe Illustrator file extension.

Before I updated this post, the next section involved using Expression Design to convert an AI file to XAML but after posting thanks to a hint from a fellow Twitter user, I’ve now discovered you can import Adobe Illustrator files directly into Blend.

This a pretty simple process that converts the AI file (that must be PDF-compatible) into a series of canvases and path data like this:

The XAML Path for the Twitter logo.

Further information on the process of importing AI into Blend can be found here on MSDN.

Update: After posting this I’ve since discovered it is possible to export XAML directly from Inkscape. Importing an ai file is still probably easiest and Inkscape doesn’t seem to format the Xaml all that well, so I’ve left the post as it is. See here for more details: http://blog.tiaan.com/link/2009/02/21/vectorize-bitmaps-to-xaml-using-potrace-inkscape