Partilhar via

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

  • Artigo

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

  • Anonymous
    April 20, 2011
    You could also just open the SVG in InkScape and save it as XAML ... http://inkscape.org/

  • Anonymous
    April 20, 2011
    You could just open and saved it as XAML in InkScape.

  • Anonymous
    February 01, 2012
    Craig, the xaml exported by Inkscape is badly flawed and doesn't work with wpf.

  • Anonymous
    October 12, 2012
    there is a second file in the xps container. This is a dictionary file wich are used in the page file

  • Anonymous
    March 24, 2014
    www.uxpassion.com/.../how-to-convert-svg-to-xaml-and-use-it-in-silverlight-or-wpf I dirty fix for this