Converting SVG to XAML with IE9 and the Microsoft XPS Document Writer


There is a growing library of content on the internet in SVG, especially with sites like The Noun Project.  With a Windows Phone project that I am working on I wanted to use a graphic from the Noun Project.  To do this I needed to convert the SVG file to XAML in order to put the graphic into a Silverlight application on the phone as XAML Paths.  Here is how I did it:

  1. I downloaded a SVG file to my computer from the Noun Project
  2. I double-clicked on the SVG file and it opened up in Internet Explorer 9
  3. On the Command bar I clicked on the Print Icon…Page Setup and set all the headers and footers to –Empty-
  4. I printed the page using the Microsoft XPS Document Writer and saved the file to my desktop.
  5. I changed the filename of the file created by the XPS Document Writer from .XSP to .zip and opened the zip archive
  6. I opened the file Documents1Pages1.fpage from the zip archive in Notepad – this is XAML text
  7. I copied everything inside the <FixedPage> which included <Canvas/> and <Path/> elements to my clipboard
  8. I created a new Canvas element in Expression Blend and pasted the contents of the clipboard into it.

Note: this might not work for all SVG graphics, especially those with more complex combined paths.

Comments (5)

  1. Craig says:

    You could also just open the SVG in InkScape and save it as XAML …

    http://inkscape.org/

  2. Craig says:

    You could just open and saved it as XAML in InkScape.

  3. JohnC says:

    Craig, the xaml exported by Inkscape is badly flawed and doesn't work with wpf.

  4. luc says:

    there is a second file in the xps container. This is a dictionary file wich are used in the page file