June 2008 Archives
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+.
