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