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

Question

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.

Mullock

While similar in nature, SVG and XAML aren't the same ... I'm not sure what you're trying to do? Do you just need to do a one-time "parse" for development purposes? For that there were Xaml exporters for Adobe Illustrator, and Microsoft Expression Design 4 is now free ... it might do it. – Pathfinder

No i need to parse that svg file through code, this is for plotting maps. I will get the map boundaries in the form of SVG file and i need to parse this and plot it in a canvas during run time – Mullock

Use WinJs instead of Xaml or host a browser. Both can natively show SVG content. – Pathfinder

Answer 1

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.

Aleedis

+1 even though this still feels like a hack. One would think that by now the tools would give you a way to save it like you wanted to save it. – Lanchow

@JesseChisholm it indeed feels like a hack to me too! Yet it still works even for Windows 10 development today :) – Aleedis

Note, Inkspace has a "Silverlight Compatible" option when you save as xaml. Can you check if that fixes your issue? I don't use silverlight – Deathwatch

If I try the Expression Design method I get Cannot assign text value 'F1 M 0,0L 46.5193,0L 46.5193,46.5193L 0,46.5193L 0,0' into property 'Clip' of type 'RectangleGeometry'. Which export option do you use? XAML Silverlight 3 Canvas or XAML Silverlight 4 / WPF Canvas. What are your other settings (Text, Live effects, ...)? Does the svg/pdf/ai need a certain size? Which one? What name do you use, when you want to embed the xaml? vectorgraphic.xaml? – Lucier

@Lucier I export as "XAML Silverlight 4 / WPF Canvas" with all effects rasterized: i.imgur.com/YX33cAD.png. Also the export file name is totally up to you (just add .xaml extension to it) – Aleedis

Incscape hasn't the Method to Save a File as Microsoft XAML (*.xaml) – Townsend

Answer 2

I cheated and converted my SVG to a font. First, I created the SVG, then using IcoMoon created the font. https://icomoon.io/app/#/select.

I downloaded the font's ttf into my assets folder with content.

Next I add the code. Notice the font filename, then #, then the name of the font. The text should be

    <TextBlock Text="&#xe901;" FontFamily="/Assets/icomoon.ttf#icomoon" FontSize="45"</TextBlock>

Kef

Answer 3

Please take a look at this article: Transforming SVG graphics to XAML Metro Icons You can find here a way to convert via transforming to XPS.

You can use also an Svg2Xaml converter.

Devindevina

Answer 4

There is a free converter available in the Microsoft Store (as standalone Windows application). It is called SVG to UWP XAML Converter.

It worked without any problems converting my multi-color SVGs correctly as batch to XAML, which I added to Visual Studio within a WPF User Control (for a preview you need to select the SVG file manually)

Pneumato