How to convert SVG file to XAML in windows 8 / WinRT

WinPhone Artist picture WinPhone Artist · Dec 2, 2013 · Viewed 36.5k times · Source

How i can convert SVG file to XAML in windows 8 / WinRT. I am new to this XAML / SVG environment. So anyone please help me to implement the same in windows 8. I need to parse this svg file and need to display the content in the page through code.

Answer

Sevenate picture Sevenate · Jul 31, 2014

For me the simplest way to do it is the following:

  1. Open your .svg file in free vector drawing tool Inkscape
  2. Save as "Microsoft XAML (*.xaml)"

Also you may need to update the result output file a bit after conversion, since not all XAML processing engines support converting a string to Figures (as described in the accepted answer to Why does this Xaml Path crash silverlight?). So, for example, if you have this:

<Path Fill="#FFEDEDED" StrokeThickness="1" Stroke="#FFA3A3A3" Opacity="0.7" 
                VerticalAlignment="Center" HorizontalAlignment="Center" >
    <Path.Data>
        <PathGeometry Figures="m 1 2 l 4.0525 5.2361 l 4.0527 -5.2361 z "/>
    </Path.Data>
</Path>    

then you will need to change it to this:

<Path Fill="#FFEDEDED" StrokeThickness="1" Stroke="#FFA3A3A3" Opacity="0.7" 
            VerticalAlignment="Center" HorizontalAlignment="Center"
            Data="m 1 2 l 4.0525 5.2361 l 4.0527 -5.2361 z" />

- OR -

You could use a bit different way to export the xaml from Inkscape, described by Tim Heuer in accepted answer to the question Convert SVG to XAML, because both ways produce different xaml output:

Method (yes, superhack):

  • Use Inkscape to save as PDF

  • Rename the Filename extension from PDF to AI

  • Use Expression Design to open AI document

  • Export to Silverlight Canvas

UPDATE (2015-08-25)

I've found my self using the second ("hack") way more and more often rather then first (more straightforward) one, because it creates more "expectable" XAML as I would call it.