For one of our current projects I needed to convert some hazard symbols from SVG to XAML to use them in a Silverlight GIS front-end. After querying the web I found several tools that supposedly do so. However none of them fitted my needs.
- A few of them where payable products; and they only offered severely crippled demo versions
- One of them was a plugin for Adobe Illustrator, and I do not have it :)
- Inkscape has an export to xaml function (Save As -> Microsoft XAML), but trying that on the hazard symbols mentioned above (you can download the SVG’s following that link) turned out to be no good. While the xaml could be parsed correctly from a technical view point, it rendered images that where nothing like the original SVG’s
One of the search results mentioned the Microsoft XPS Document Writer printer driver. And to my suprise, you can in fact use that one in the process of converting SVG’s to XAML :)
Here’s what I did:
This may seem a bit tedious, but in fact works quite well once you have done a few conversions :)
First, you need an SVG file. For example: this one
Secondly, you need to open that SVG file in Inkscape (I have had no luck printing the SVG from my browser, probably because it uses some weird plugin to render the SVG).
Then print the SVG from within Inkscape to the Microsoft XPS Document Writer. You have to specify a file name:
Then go to the location of the .xps file and rename its extension to .zip (yep, apparently it is also a zip file :))
Browse the zip file for \Documents\1\Pages\1.fpage and extract that file.
Optionally rename its .fpage extension to .xml to open it up in your favourite xml editor. Alternatively leave the file as-is and open it in any text editor (notepad will do).
You should see something like:
<FixedPage Width="816" Height="1056" xmlns="http://schemas.microsoft.com/xps/2005/06" xml:lang="und"> <Path Data="F0 M 4.32,528.8 L 528.8,528.8 528.8,4.32 4.32,4.32 4.32,528.8 z" Fill="#ffff7d00" /> ... snip ... </FixedPage>
If you copy-paste all the lines that are enclosed between the <FixedPage> tags inside a <Canvas> tag you have fully functional XAML ready to be used in your Silverlight or WPF application :)
- In Firefox (3.1 but 3.0 should do also, even 2.0 i think), i can open the SVG without any problems and print to XPS, thanks to Firefox’ built-in SVG capabilities. No need to use another program. must.. resist… saying… USE A REAL BROWSER… pfew, glad i could resist :)
- Why does MS always has to come up with their own ’standards’. SVG works, why not just support that in WPF/Silverlight :s ?
- I found this page, http://weblogs.asp.net/jgalloway/archive/2007/06/05/silverlight-and-xaml-have-you-guys-met-old-man-svg.aspx, which seems to have code that can load an SVG on the fly in WPF. Also it links to a javascript converter for SVG to XAML.
Comment by TeRanEX — March 18, 2009 @ 08:31
Haven’t tested Firefox for this (used Chrome). And maybe you got me wrong: I was able to print to XPS, but the result was not usable in xaml although it looked OK in the XPS viewer (my guess is it rendered a bitmap version to print it out).
No need to discuss the whole SVG vs XAML thing; XAML is a superset and contains way more functionality then SVG (google for it if you wish)
I also came across that page you mention in my initial search. The javascript did not produce the correct result for the example SVG that I refer to in my post. I think the problem with all the ‘free’ SVG to XAML converters is that most of them are based on the same ‘engine’ (I think it originated from someone who wrote a SVG2XML.xsl); and that one is still not capable to convert hazard_E.svg to any usable xaml code.
Comment by benpittoors — March 18, 2009 @ 09:44
hmm so does this mean that, while chrome can show the SVG file correctly, it sends the output differently to XPS then Inkscape does? Then indeed i didn’t understand you correctly. Does Chrome also use a plugin to show SVG, no native support? (because you mentioned a plugin, i thought you used IE). FF has native SVG support, maybe it sends the SVG correctly to XPS?
I didn’t mean to say xaml is a bad thing or something like that. i just think it is a bit sad MS didn’t add SVG support into it, as it is very similar, it can’t be that hard for them i guess.
Comment by teranex — March 18, 2009 @ 09:59
Yep, it sends the output differently to XPS.
Must admit that I don’t know whether the SVG rendering is native in Chrome or that it is through a plugin :) Although it was my understanding that the whole Chrome architecture is based on plugins… (don’t shoot me if I’m wrong here)
You can always try it using FF if you want (let me know in a comment what your findings are if you do so).
Comment by benpittoors — March 18, 2009 @ 10:27
I think depending on the image your mileage may vary.
I have svg document, but when I printed it to XPS using Inkscape, the XAML used an ‘ImageBrush’ to render a png of the original image.
However, when I used chrome to print to XPS, the XAML came out using ‘paths’ as desired.
Comment by Andy — July 9, 2009 @ 04:37