What is SVG?
Like what the name suggests, SVG (Scalable Vector Graphic) is an XML-based vector image format that can define basic properties such as paths, shapes, colors. It also take care of some more advanced features like gradients, animation and so on.
So what are the benefits of using SVG? As a designer, creating a graphic is one of the fun parts of my job. However, cutting assets for different resolutions can be painful as new devices with different pixel densities and resolutions arrive in the Windows market.
A scalable graphic can be the perfect solution for this matter, but there are a few places that you can’t avoid fixed-resolution PNGs, such as app bar on Windows Phone (unless your team decides to build a custom one).
How I work with SVG for Windows Projects
There are a few different ways to use SVG in web and mobile development, but in this article I’ll cover how I use SVG for Windows development with a few tools in different situations.
1. Working with Illustrator file: EPS, Ai
Create or open a graphic in Illustrator and save it as SVG. In this example, I’ll use the Twitter logo.
Hit save, and SVG option window will prompt.
Never mind all the options here. We’ll just grab the SVG code here.
Once you hit [SVG Code], you’ll see a text edit window pops up. We are going to make a few changes to make it work for Blend / Visual Studio.
The lines highlighted in red can be deleted. The blue is something you would modify.
Change path and fill to upper case. Change d to Data. And we’re going to wrap up the whole thing in a . The viewbox is used here to make its content inside scaled as the the screen grows.
Copy and Paste in Blend.
2. You can also use web browser to get the SVG path.
1. Open your SVG file with a web browser. In this example, I’m using Internet Explorer 11, but you can do pretty much same with Chrome and Safari.
2. Open developer mode. Hit the little triangle to reveal the path data.
We’re going to do pretty much same thing as what we did with Twitter bird above. Notice that this path data doesn’t include the color; I figured the code omits the color when it is black (#000000). That doesn’t mean that you don’t need it for Xaml. You have to input the color value to the code which is Fill=”#FF000000” or Fill=”Black”.
This is how it looks in Blend.
3. Working with more complicated graphics
I find Inkscape very useful for multi layered icons. There are other converters such as ViewerSvg and XamliTune, if you wish.
1. Get your SVG file ready whether you created with Illustrator or downloaded.
2. Open it with InkScape and save as Xaml
Close InkScape and open the saved .xaml file with Notepad(Windows) or Textedit(Mac).
Again, let’s edit a few lines. The lines highlighted in red can be deleted. The blue is something you would modify. You can name each containers and layer for your own clarification, but I find names don’t add any value most of time.
Notice that there is a 
to wrap all the layers of Paths. works as a container to hold all the “children” since 
can have only one child.
Conclusion
This is what I have done for the latest Windows Phone 8 project as part of ongoing experiment on how to future proof design for mobile development. I found this to be future friendly in a sense that my graphics can cover all the sizes and pixel densities without cutting all the png assets and updating them as new devices arrive. It may not be perfect right now, and it may require a little more effort from some designers (especially who never touched Blend before). However, it’s definitely worth try and relatively easy to learn. So why not try? I’m still learning, so please let me know if you find a way to improve.
About the Author
