HOW TO: Convert SVG to XAML and use it in Silverlight or WPF applications?
How to convert SVG vector files to XAML so that you can use them for your Silverlight or WPF (Windows Presentation Foundation) applications? Furthermore, how to edit SVG files in Expression Design and use them in Expression Blend? In this tutorial I will show you how…
SVG (Scalable Vector Graphics) files are graphical vector files that are quite popular on internet. Wikipedia, for example, uses SVG for most of its schemes, charts, maps and graphical elements like that.
Expression Design – Microsoft’s vector drawing tool currently does not support import for SVG files. But, fortunately, there is a good workaround. In this tutorial I will show you how you can convert SVG files to XAML. Of course, XAML then can be used in Expression Design or Expression Blend and, therefore, in your WPF or Silverlight applications.
1. Let’s find SVG file that we are going to use for this example. You can use any SVG file but for this example we will go to Wikipedia article on Microsoft’s Zune player and convert Zune logo in SVG format to XAML.
You can get SVG file here: http://upload.wikimedia.org/wikipedia/en/0/0a/Zune_logo.svg (Right-click on hyperlink and choose Save Target As… and save it, for example, on your Desktop.
2. Get the free InkScape vector drawing tool from http://www.inkscape.org . InkScape is Open Source tool with support for reading and editing SVG files.
3. Start InkScape. Go to File then Open… Find your SVG file and click on Open.
4. Your selected file will open in InkScape and you can see it on artboard.
5. Go to File and click on Save As… Dialog shows and there you can select new file name. But now it is important to save your file in PDF (via Cairo) file format. So, pick that file format and then click on Save.
6. New dialog opens asking you about more PDF details. Just accept the defaults but pay attention that there is a check-mark near option Convert text to paths.
7. Now you have your SVG file saved as PDF. PDF is also type of vector format. Find your newly created PDF file and change its extension from PDF to AI (Adobe Illustrator file). You can do that by right-clicking on our file and in drop down menu go for Rename. Change .pdf with .ai and you are almost ready to go.
8. With your AI file ready you can now start Expression Design. Go to File then New document. In dialog that shows you can pick preset you want – I’ll go for 800 x 600. Click on OK button.
9. Now, let’s go and import your previously created AI file into Expression Design. Go to File then Import. New dialog shows and there you can select your AI file. When you are done, click on Open.
10. There you go. You now have your file in Expression Design ready to be modified or just exported into XAML file for you WPF or Silverlight apps.
11. Take a look at Layers pane in Expression Design. You can notice that each and every element has been broken into paths and that you can select them one by one and change their properties.
We are not going to that now – we will just go on and see how we can use this imported image in WPF or Silverlight.
12. First, select all objects you want to export. You can go and press CTRL+A to select all paths and elements. Once again, go to File but now pick Export command. New dialog shows.
Under Export Properties section you can see Format drop down list. There you can pick desired export format. We will go and pick XAML Silverlight Canvas.
Under Text section mark the Paths option so that any text element can be converted to paths.
Enter the name in File name and pick the location for your file with Browse… button.
When you are done, click on Export All.
13. We have come a long way from SVG to PDF/AI and now to XAML file. Now, when it is saved as XAML, you can start Expression Blend and use that XAML file.
14. Create a new project in Blend and then right click on project file in Project pane. Click on Add Existing Item…
15. From dialog, pick your XAML file – in our case it is zune_logo.xaml and click on Open.
16. You can now see that zune_logo.xaml is part of our project. Double click on it to open it.
17. Now, with zune_logo.xaml added to your project, you can use functions like Copy and Paste and add it to your interface. Also note that all original SVG formating is in place and that you can actually select elements and change their properties even trough Expression Blend.
So, just to sum up. First you need to find SVG file, open it in InkScape and save it as PDF file. Then you change it’s extension from PDF to AI. Now, open new document in Expression Design and import your AI file. Select elements you want to export to XAML and go to File then Export. Set name, location and file format (Silverlight XAML…). And now you can start Expression Blend and add newly created XAML file to your project.
Go on and start converting SVG files to XAML files and have fun!
Update: One of the UXPassion.com’s readers – Raj – has suggested that this process is now more simplified since, as he puts it, Inkscape now supports direct export to XAML. And that is all good if your scenario is direct using of XAML workart in Expression Blend. But Expression Design does not support XAML import, so in case you want to modify your SVG files in Expression Design, you should follow the procedure I’ve described in this article. Thanks Raj!
42 Responses to “ HOW TO: Convert SVG to XAML and use it in Silverlight or WPF applications? ”
Trackbacks
- Apolitically Incorrect » WPF – SVG Graphics and XAML – Part 1
- Jungchan Hsieh
- Jungchan Hsieh
- Jungchan Hsieh
- Jungchan Hsieh
- Jungchan Hsieh
- Jungchan Hsieh
- Kistner Consulting
- Kistner Consulting
- Kistner Consulting
- MSExpression
- msexpression
- silverfighter
- MSExpression
- brian_henderson
- silverfighter
- MSExpression
- XAML – Converter SVG para XAML « André Baltieri
- silverfighter
- brian_henderson
- brian_henderson
- Alan Brown
- Alan Brown
- Alan Brown
- XAMLTableOfExperts
- Frank La Vigne
- silverfighter
- XAMLTableOfExperts
- Frank La Vigne
- silverfighter
- XAMLTableOfExperts
- Frank La Vigne
- silverfighter
Thanks dude – u saved my day!
No problem, I am glad that this tutorial was helpful!
I’ve attempted using this method and receive an import illustrator error in expression design. “The contents of the file are not recognized.” The file may be corrupt or damaged. Has anyone seen this issue before? It is a fairly complex graphic so I am going to attempt breaking it down and see if that helps.
Yes, that might be problem if SVG is very complex. Try splitting it, as you suggested, I hope it will work!
Inkscape provides direct export to XAML. Refer
http://weblogs.asp.net/jgalloway/archive/2008/01/10/inkscape-to-support-xaml-export.aspx or
http://timheuer.com/blog/archive/2008/01/08/inkscape-svg-xaml-conversion-scale.aspx
So it’s easier now. No need of going through svg -> pdf -> ai -> xaml
Nice, I will update the article! Thanks a lot for posting this!
i dont think the ‘E’ likes to dance
Haha, you are right, that was “artistic freedom”, no intention whatsoever to mess with official branding guidelines!
Wow, nice hint on vector PDFs == .ai files! That’s friggen awesome! Now I can take the pdf output from Vector Magic (no link–google the VM website), rename it ai and pull it right into Expression Design!