Converting images to paths

Just a quick trick to convert an image into a vector based path in xaml. 

To be able to handle anything more than the most basic image you’ll probably need Expression Design installed.

For an example, I’m going to use the logo for what is probably xaml’s arch enemy…. HTML 5!

Here is our example image:  http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png

The first step is to download Inkscape from the web:  http://inkscape.org/

It’s an open source SVG graphics editor.  When you open your PNG file, select to “embed” the image:

Now select the object:

And from the menu choose “Path > Trace Bitmap…”:

Make sure the “Colors” option is selected and click Ok:

This will make a create a Vector Path object on top of your original image (which is a bit weird), so you need to “Edit > Copy” then “File > New” and “Edit > Paste” to create a nice clean vector image.

Now we could just “Save As > Xaml” but unfortunately the Xaml created isn’t that compatible with WPF or Silverlight so we’ve got an extra hoop to jump through.  Give it a go and see how you get on.  If the resultant xaml doesn’t work in Kaxaml for example you’ll need to follow these extra steps.

We need to get the image into Expression Design.

Still within Inkscape for now, “Save As” file type PDF (stay with me on this one) and select texts to paths

Now rename your “.pdf” file to “.ai” file type and you can open it in Expression Design:

Now finally we can export to Xaml Silverlight 4 / WPF canvas and all is good in the world.