HOW TO: Convert SVG to XAML and use it in Silverlight or WPF applications?

Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today. 

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.

Open your SVG file in InkScape

Open your SVG file in InkScape

4. Your selected file will open in InkScape and you can see it on artboard.

SVG file in InkScape

SVG file in InkScape

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.

Save your file in PDF (via Cairo) file format

Save your file in PDF (via Cairo) file format

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.

HOW TO: Convert SVG to XAML and use it in Silverlight or WPF applications?

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.

Rename your PDF to AI

Rename your PDF to AI

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.

Setting some options...

Setting some options...

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.

Import your previously created AI file into Expression Design

Import your previously created AI file into Expression Design

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.

Your AI file in Expression Design...

Your AI file in Expression Design...

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.

Each and every element has been broken into paths

Each and every element has been broken into paths

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.

Exporting AI to XAML...

Exporting AI to XAML...

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…

Adding XAML to your Expression Blend project

Adding XAML to your Expression Blend project

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.

Your XAML file is now in Expression Blend ready to be used

Your XAML file is now in Expression Blend ready to be used

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.

You can edit your imported XAML file like any other XAML

You can edit your imported XAML file like any other XAML

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!

Comments (20)

  1. Thanks dude – u saved my day! :)

  2. No problem, I am glad that this tutorial was helpful!

  3. 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.

  4. Yes, that might be problem if SVG is very complex. Try splitting it, as you suggested, I hope it will work!

  5. 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!

    • It doesn’t appear that exporting to XAML from Inkscape creates Silverlight compatible output, unfortunately.

  6. 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!

  7. 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!

  8. I’m trying to view this in the 5.2.7.2 version of the flock web browser and the page looks sorta chopped up. Might want to take a look.

  9. This tutorial not only saved my day, it saved me time and money! Thank you so much!

    Where’s your donate button? =) The least I can do, is click your fb “Like” button.

    Thanks Again,
    Lynn

    • Haha I might consider adding Donate button at some point. But until then, like will be more than good. Many thanks!

      • Hey Jesse, great for you because Telerik is amosewe and I’m proud to use their Silverlight bundle. Their support is the best in the world I’m sure about that.I’m happy to have made 2 great projects using RadGridView and other control for years without a single bug, Well, maybe one or two but very minor bugs and. It’s solid like rock ! I love Telerik, I love Silverlight and hope to continue that path for a long time.

  10. All Path in the xml file generate by this tutorial are like that x:Name=”Path_XXX” (XXX is numeric auto increment) , so we lost the real name of the path !!
    Do you have an explication ? and how to do to conserve the path’ name from svg file in the xaml file ?

    Thanks

  11. Many many thanx to you…. superb share..!!!

  12. This is an extremely useful trick, given the strange limitation in Design to only support AI format. I am however not having much luck with the process in my newly fetched Inkscape 0.48.1 version. It looks like the options for Save As with PDF is different now? Any idea if this can be done with 0.48.1? Thanks!

  13. Howdy Darryl,For silverlight 2, have they added WPF dagdirtas out-of-box. I was shocked to find that xceed dagdirtas were needed to use the datagrid WPF control and there is no longer a free version for use. IMO, this is a huge setback for WPF adoption and a possible adoption killer for small shops. If I missed something with this stance, please enlighten.- Johnathan

  14. It is really a great and useful piece of info. I’m glad that you simply shared this helpful info with us. Please keep us informed like this. Thank you for sharing.

  15. what about the xaml code. ? do it generate it correctly for use in blend?

Trackbacks

  1. Pingback: Apolitically Incorrect » WPF – SVG Graphics and XAML – Part 1

  2. Pingback: Jungchan Hsieh

  3. Pingback: Jungchan Hsieh

  4. Pingback: Jungchan Hsieh

  5. Pingback: Jungchan Hsieh

  6. Pingback: Jungchan Hsieh

  7. Pingback: Jungchan Hsieh

  8. Pingback: Kistner Consulting

  9. Pingback: Kistner Consulting

  10. Pingback: Kistner Consulting

  11. Pingback: MSExpression

  12. Pingback: msexpression

  13. Pingback: silverfighter

  14. Pingback: MSExpression

  15. Pingback: brian_henderson

  16. Pingback: silverfighter

  17. Pingback: MSExpression

  18. Pingback: XAML – Converter SVG para XAML « André Baltieri

  19. Pingback: silverfighter

  20. Pingback: brian_henderson

  21. Pingback: brian_henderson

  22. Pingback: Alan Brown

  23. Pingback: Alan Brown

  24. Pingback: Alan Brown

  25. Pingback: XAMLTableOfExperts

  26. Pingback: Frank La Vigne

  27. Pingback: silverfighter

  28. Pingback: XAMLTableOfExperts

  29. Pingback: Frank La Vigne

  30. Pingback: silverfighter

  31. Pingback: XAMLTableOfExperts

  32. Pingback: Frank La Vigne

  33. Pingback: silverfighter

  34. Pingback: Lynn Schafer

  35. Pingback: escdev

  36. Pingback: Mohamed Ik Boulabiar

  37. Pingback: jonas.eriksson

  38. Pingback: Pablo Núñez

  39. Pingback: Junior

  40. Pingback: Hanna Kronberg

  41. Pingback: Win8 (Metro style) app development – getting started « RaSor's Tech Blog

  42. Pingback: List of Utilities | RaSor's Tech Blog