Import an Adobe Illustrator file

Article
10/10/2017

You can import PDF-compatible Adobe Illustrator files (.ai) directly into an open document in your Microsoft Expression Blend project.

When you import an Illustrator file into Expression Blend, Illustrator layers, groups, and objects are converted to Expression Blend containers and objects with associated properties. Understanding how Illustrator objects are imported into Expression Blend will help you integrate Illustrator files into your Expression Blend projects more quickly and efficiently.

When you save your file in Illustrator, make sure that the Create PDF Compatible File check box is selected in the Illustrator Options dialog box. Otherwise, you will not be able to import your Illustrator files into Expression Blend.

Create PDF Compatible File check box

To import an Illustrator file

Open the document into which you want to import the .ai file.
On the File menu, click Import Adobe Illustrator File.
In the Import Adobe Illustrator File dialog box, locate the Illustrator file that you want to import, and click Open.
Click OK.

A new Canvas object with the same name as your imported file is added to your document. In the Objects and Timeline panel, under the Canvas object (named AvatarSymbols in this example), are all of the Illustrator objects imported as Expression Blend objects. If images are imported as a part of your .ai file, a new folder (named AvatarSymbols_Images in this example) is created in the root folder in the Projects panel to contain all the converted image files.

Note

If there are no images associated with your project, a folder will not be created in the Projects panel.

Adobe Illustrator import in Expression Blend

You can also create a custom folder in the Project folder for any images that are associated with your .ai file.

To create a custom images folder

In the Projects panel, right-click the .csproj file, and then click Add New Folder.
Type a name for the new folder in the folder name box.
With the folder selected in the Projects panel, import the Illustrator file by following the steps in the preceding procedure entitled "To import an Illustrator file."

Layers, groups, and objects

Expression Blend imports Illustrator layers and groups as nested XAML Canvas objects containing paths and images. Nested Canvas objects are used as layout containers to make them easier to work with in Expression Blend. The following information will help you understand how to work with Illustrator files after they are imported.

Layer names

Layer names are preserved for the top-level groups (Avatars in the preceding image). After you import your Illustrator file into Expression Blend, you can change the name by right-clicking the object in the Objects and Timeline panel and then clicking Rename, or by double-clicking the object name and then typing directly in the object name field.

File structure and groups

Illustrator groups do not exist in PDF-compatible files, so are not imported into Expression Blend. However, the objects contained within an Illustrator group are imported as individual objects with the same positioning as in the Illustrator group.

Object types

Images are imported as PNG files and are added to an images folder in the Project panel, and added as Image objects in the Objects and Timeline panel. Text and vector objects are imported as editable paths and appear in the Objects and Timeline panel.

Visibility and lock

Visibility settings for Illustrator layers imported into Expression Blend are preserved. However, only visible objects within layers are imported. You can change which objects are imported into Expression Blend by changing the visibility settings of the objects within each layer in Illustrator.

Lock settings are ignored.

Editable content

If the imported content is editable, you can modify the appearance of the content in Expression Blend by modifying the object properties. The following table describes Illustrator elements that are editable in Expression Blend. Use the Description column to locate the properties for the object in order to modify them in Expression Blend.

Illustrator element	Expression Blend element (XAML)	Description
Group	Canvas	Illustrator groups are ignored. However, the content of the group is imported as individual objects in the Objects and Timeline panel.
Text (type objects)	Canvas	An Illustrator type object is imported as a Canvas object named TextBlock with the original Illustrator text imported as Path objects. Text styles are imported as separate Path objects. For example, a 5-letter word with a Strikethrough style applied is imported as a Canvas object containing 6 paths, one path for each letter of the word, and an additional path for the Strikethrough style.
Stroke	Path	An Illustrator stroke is imported as a path with the Stroke properties mapped to the Stroke brush in the Properties panel in Expression Blend.
Solid color fill	Path	An Illustrator solid color fill is imported as a Path with the original Fill property mapped to Expression Blend Color properties applied to a Solid color brush. Solid color brush properties are located in the Brush category of the Properties panel.
Linear gradient fill	Path	An Illustrator linear gradient fill is imported as a Path with the original Fill property mapped to Expression Blend Linear gradient brush properties applied to a Gradient brush. Linear gradient brush properties are located in the Brush category of the Properties panel.
Radial gradient fill	Path	An Illustrator radial gradient fill is imported as a Path with the original Fill property mapped to Expression Blend Radial gradient brush properties applied to a Gradient brush. Radial gradient brush properties are located in the Brush category of the Properties panel.
Image layer	Image	An image object in Illustrator is imported as an Image object in Expression Blend. In addition, a PNG file is added to the project. The PNG file is the source for the Image object.
Custom fill	OpacityMask applied to an ImageBrush	Illustrator supports multiple fills for an individual object. If a second fill is applied to an object in Illustrator, and that fill contains an alpha channel, the fill is imported as an OpacityMask applied to an ImageBrush. For best results, use only one fill acting as an opacity mask in your Illustrator file. OpacityMask properties are located in the Brushes category in the Properties panel. In addition, a PNG file is added to the project. The PNG file is the source for the ImageBrush. Note You can verify whether or not a second fill has been applied to an object by viewing the object properties in the Appearance panel in Illustrator.
Clipping mask	Clip property	An Illustrator clipping mask is imported as a Clip property. Clip properties are located in the Miscellaneous category in the Properties panel. Note The Clip property has limited support in Windows Phone projects.

Illustrator feature support in Expression Blend

The following Illustrator features are supported in Expression Blend. Where noted, features can be edited in Expression Blend.

Note

Although Expression Blend supports the following Illustrator features, for best results, create your Illustrator file using only vector art.

Text

Text layers imported from Illustrator are converted to a canvas, and each character is a separate path object that is a child of the canvas. The appearance of the text is maintained, but is no longer editable as text after it is imported.

If a single text layer in Illustrator contains hard returns, the text associated with each paragraph break will be imported as a separate canvas object when imported into Expression Blend.

Important

You may experience unexpected results when you import text from Illustrator. These results can include unexpected character rotation, kerning, point sizes, and alignment.

Text styles

The following Illustrator text effects create individual paths when imported into Expression Blend.

Subscript
Superscript
StrikeThrough
Underline
SmallCaps
AllCaps

Effects

Effects are supported, but not editable, in Expression Blend. Effects are rasterized and imported as Image objects. A PNG file is used as the source for the image object, and is located in the folder that is created in the Project panel.

Gradients

Expression Blend supports the importing and editing of linear and radial gradients. Color stops are imported as gradient brushes to the Fill property of the resulting object in Expression Blend, and opacity stops are imported as gradient brushes to the OpacityMask property.

Strokes

Custom strokes are imported as individual paths.

When you save an Illustrator file in PDF-compatible format, strokes and fills are saved as separate paths. When you import a PDF-compatible file into Expression Blend, a stroke and a fill on the same object may also be imported as separate objects. However, if the stroke and the fill are identical, the stroke and the fill may be merged into a single object when imported into Expression Blend.

Share via