I am currently working on a GUI and iconset in Illustrator which will be exported (using a plug-in) to XAML.

While GUI elements can be exported by placing them in a new file, this becomes a lot of work with iconsets. Which I want to avoid. So I am looking for a streamlined workflow to export multiple groups/artboards/layers (similar to Export for Web & Devices) for XAML (the plug-in does not support "use artboards").

  • That's an awesome plugin, I didn't know of it and it completely changes my workflow. I'm currently using M. Expression to export to xaml, but there's only so much you can do with it... – Yisela Jan 28 '13 at 19:43
  • Glad I was of help. I've been experimenting with it and will update my question as the biggest issue is not the export anymore but rather the carrying over of naming conventions. – KMSTR Jan 28 '13 at 22:37

My own solution:

  1. Spread icons on a grid. Designing the icons on an artboard that perfectly fits the grid helps streamlining this process (e.g. for adding new icons later).
  2. Keep all icons on a "icons" layer. This makes them identifyable in the final file as this will result in an icon canvas in XAML.
  3. Keep squares that determine canvas size on "backgroud" layer. Without this "helping layer", the canvas would be set to the dimensions of the icon, which can vary.
  4. Duplicate the squares and create artboards from those shapes. There are other ways to create multiple artboards, this seems to be the fastest one.
  5. Rename artboards according to layer.
  6. Export to Illustrator EPS, make sure to selecte "use artboards".
  7. Record an Action of exporting (e.g. a sample file) to XAML. Make sure to not rename the file when doing this. There seems to be a difference between renamed and not renamed. So if renaming is part of the recorded action, all files will have the same name. Which you want to avoid.
  8. Select "Batch" from the Action dropdown menue to apply the recorded Action to a folder (with the eps files).

File and canvas names:

Names of renamed artboards are carried over to filenames (unnamed ones carry only the number) when exporting to Illustrator EPS. Resulting in properly named EPS files filename_artboard.eps.

Each layer creates a canvas in XAML. Additionally, layer names as well as group/path names are addes as comment to the coherent canvas, looking like this: <!-- layer/group -->

So the most time-consuming is the renaming of artboards and groups as one is for filenames and the other for canvas comments.

Here is an example result:

<Canvas Width="32.000" Height="32.000">

  <!-- background/square -->
  <Path Opacity="0.0" ... />

  <!-- icon/fantastic -->
  <Path ... />


Note that the layer order is reversed, but the visibility stays the same (as in Illustrator). This is not a bug.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.