A vector image is a geometric representation of an image. SVG is a common file format for vectors. Here’s how you can convert the contents of your SVG into XAML.
Why convert to XAML?
You can’t use an SVG file directly within your XAML. The image tags don’t allow you to load it. There are third party packages that can allow you to use it but personally I’ve never bothered.
Odds are you are here because you either have an SVG you want to convert or you want to create one.
What you ultimately want to get is XAML something like this - a path with data. You can then stick it into a canvas, viewbox, etc.
[code language="xml”] [/code]
Creating an SVG
If you want to create an SVG, there are a bunch of tools available. A nice free option is Inkscape. You can easily create an image or load one, then save it as an SVG. You can also export to XAML (more on that in a moment).
[caption id="attachment_170” align="aligncenter” width="300”]
Sample image in Inkscape[/caption]
You can download the above SVG file here.
Note that the above image consists of only three lines. It’s really easy / simple. That won’t be the case for all SVGs!
There are several methods available. None of them are perfect.
METHOD 1 - opening the SVG File
An SVG is an XML file format. You can open it in your favourite text editor. If you were to open the file and scroll down, checkout the content below.
[code language="xml”] [/code]
The data you want is in the d properties of the path. The simplest thing to do is copy and paste it out. Note that I had to keep the F1 in front of my paths
[code language="xml”] [/code]
Method 2 - Using Inkscape
The steps are: 1) Open your SVG in Inkscape 2) File -> Save As… 3) In the file types, select Microsoft XAML (near the bottom) 4) In the window you have the option of Silverlight compatible. I’d select as it generates cleaner XML
Note that you probably still have some cleanup to do. I’d suggest removing unnecessary tags and properties - especially the xmlns:x property in each element. [code language="xml”] <Canvas.RenderTransform> </Canvas.RenderTransform> <Canvas.Resources/> <Canvas.RenderTransform> </Canvas.RenderTransform> [/code]
Method 3 - XPS format
Bit of a roundabout method but an interesting one which generates cleaner code.
XPS format is (or was?) an alternative to PDF. You will often see it available as a virtual printer.
An XPS is a zip file containing a bunch of files. The data is very similar to XAML.
Steps: 1) Print your SVG to the XPS printer 2) The XPS printer will ask you for a file name. Save it somewhere 3) Rename the file extension to .ZIP 4) Extract all the files in the zips. It will create a bunch of files and folders 5) Hunt down the file. It’s likely under Documents > 1 > Pages > 1.fpage
Once you find the code you will be rewarded with some nice, clean code. You could take those Path items out and past them right in and it would work in XAML.
[code language="xml”] [/code]
Conclusion
There we go - an SVG converted into Paths we can use in our XAML!