Monday, 14 May 2012

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:

image

Now select the object:

image

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

image

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

image

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

image

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

image

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

image

3 comments:

  1. Hi! I follow your instructions, but ".ai" format file don't open in Expression Blend :(. Write: error format file. Please help...

    ReplyDelete
  2. hi..Im college student, thanks for sharing :)

    ReplyDelete
  3. Great post, saved me tons of time by being able to reuse more common files to start and then tweaking the vector graphic xaml.

    ReplyDelete