How do I convert an Illustrator file to a path for WPF

Question

Our graphics person uses Adobe Illustrator and we'd like to use her images inside our WPF application as paths. Is there a way to do this?

Bluebird

I use Expression Design and import the .ai file. Once you have it in Expression design, you can copy/paste the art asset into Blend directly or you can use the Export as Xaml feature. – Intercut

Answer 1

You can go from AI to SVG to XAML.

1. From Adobe Illustrator: File -> Save As -> *.SVG.

   • SVG "Profile 1.1" seems to be sufficient.

   • Note that to preserve path/group names in XAML you should enable "Preserve Illustrator Editing Capabilities" (or at least as it's called in CS4).

2. SharpVectors can convert SVG data to XAML data. This will produce a fragment of XAML with root <DrawingGroup>.

3. Do what you need to do to copy-paste and otherwise use the XAML, such as placing it into an Image like below. Named objects or groups in the AI file should still have their names in the XAML i.e. via x:Name="...".

<Image>
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup ... the output from step #2 ...>...</DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

4. Coordinate systems can be a pain if you want to be animating things. There are some other posts such as this which may have insights.

Depilate

FINALLY someone describing what you need to do with the XAML DrawingGroup. Thanks a lot! – Adenoidal

Answer 2

Get her to export the illustrations as some other format (recent versions of Illustrator support SVG) that you can use or convert to something that will work.

Evanesce

Answer 3

The detour suggested by @ConcernedOfTunbridgeWells is starting to make sense now. Other solutions are not being maintained and do not work anymore.

Hence, you can use this option as workaround:

1. Save files as svg.
2. Convert them to XAML using Inkscape.

This solution even has the advantage of text will stay text and is not converted to a path.

How to convert many files?

Inkscape also supports a batch mode to convert many files at once. I took a great script (by Johannes Deml) for batch conversions on Windows that takes vectors files and converts them to various other formats using Inkscapes batch mode. I adapted it to convert to XAML, too.

You can find the script that includes XAML on Github. Some instructions on how to use the script are provided by the original author.

Persevere

Answer 4

For a short time I used Mike Swanson's plug-in for Illustrator, but now I use SaviDraw. Export from AI to SVG. Open in SaviDraw. Export to XAML.

It's only for Windows, free on the Windows Store.

Probably the best feature is that it doesn't have a standard Pen tool, it has a "Path" tool that just draws lines or shapes following your motion with the mouse or on the screen with touch. It's great for tracing bitmaps, which can be imported (JPG or PNG).

Cacilia