SVG
Converting SVG to XAML
While I understand (and even agree with some of) the reasons behind Microsoft reinventing the wheel and not using SVG for their WPF, I find myself constantly wishing they at least offered it as a supported image format. There is so much SVG out there, it’s a shame to not be able to use it.
On my search for a SVG to XAML converter I came across a few really old and out of date tools, one recent but still sub-par tool, and finally one almost perfect tool: Michael Swanson’s Adobe Illustrator to XAML Export plugin.
As the name suggests, it is a plugin for Adobe Illustrator. It works great, but It’s a bit odd to use – by default, it exports to a canvas which, for everything I’ve ever wanted to use a XAML image, is the wrong choice. Luckily it also supports exporting to a DrawingBrush if you hold down the right shift key when you click save in Illustrator.
DrawingBrush isn’t my first choice of format, but you can easily change it into a DrawingImage resource, which lets you use it just like any other ImageSource. To do so you just take what it spits out:
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle> <Rectangle.Fill> <DrawingBrush> <DrawingBrush.Drawing> <DrawingGroup> ... </DrawingGroup> </DrawingBrush.Drawing> </DrawingBrush> </Rectangle.Fill> </Rectangle> </Viewbox>
And move it’s root DrawingGroup over like so:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <DrawingImage x:Key="someImage"> <DrawingImage.Drawing> <DrawingGroup> ... </DrawingGroup> </DrawingImage.Drawing> </DrawingImage> </ResourceDictionary>
Now you can use it just like any other resource:
<Image Source="{StaticResource someImage}"/>
All in all, it’s a fantastically useful tool. If it had some form of UI to select export options instead of asking you to use the shift key (really, wtf??), it would get an A+.