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