June 2008 Archives

Converting SVG to XAML

Posted on June 01, 2008

While I un­der­stand (and even agree with some of) the rea­sons be­hind Mi­crosoft rein­vent­ing the wheel and not using SVG for their WPF, I find my­self con­stantly wish­ing they at least of­fered it as a sup­ported image for­mat. 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 con­verter I came across a few re­ally old and out of date tools, one re­cent but still sub-par tool, and fi­nally one al­most per­fect tool: Michael Swan­son’s Adobe Il­lus­tra­tor to XAML Ex­port plu­gin.

As the name sug­gests, it is a plu­gin for Adobe Il­lus­tra­tor. It works great, but It’s a bit odd to use – by de­fault, it ex­ports to a can­vas which, for every­thing I’ve ever wanted to use a XAML image, is the wrong choice. Luck­ily it also sup­ports ex­port­ing to a Draw­ing­Brush if you hold down the right shift key when you click save in Il­lus­tra­tor.

Draw­ing­Brush isn’t my first choice of for­mat, but you can eas­ily change it into a DrawingIm­age re­source, which lets you use it just like any other Im­age­Source. 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 Draw­ing­Group 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 re­source:

<Image Source="{StaticResource someImage}"/>

All in all, it’s a fan­tas­ti­cally use­ful tool. If it had some form of UI to se­lect ex­port op­tions in­stead of ask­ing you to use the shift key (re­ally, wtf??), it would get an A+.