In Illustrator, you can turn any piece of artwork into a template for data-driven graphics. All you need to do is define which objects on the artboard are dynamic (changeable) using variables. You use variables to change text strings, linked images, graph data, and the visibility setting of objects in your artwork. In addition, you can create different sets of variable data to easily view what your template will look like when it is rendered.
Data-driven graphics make it possible to produce multiple versions of artwork quickly and accurately. For example, suppose that you need to produce 500 different web banners based on the same template. Manually populating the template with data (images, text, and so on) is time-consuming. Instead, you can use a script that references a database to generate the web banners for you.
Data-driven graphics are designed for use in collaborative work environments. Following are some examples of how data-driven graphics fit into different job roles:
If you’re a designer, creating a template gives you control over the dynamic elements of your design. When you hand your template over for production, you can be sure that only the variable data will change.
If you’re a developer, you can code variables and data sets directly into an XML file. The designer can then import the variables and data sets into an Illustrator file to create a design based on your specifications.
If you’re responsible for production, you can use scripts within Illustrator or the Batch command. You can also use a dynamic imaging server such as Adobe® Scene7 to further automate the rendering process.
Variables panel overview
You use the Variables panel (Window > Variables) to work with variables and data sets. The type and name of each variable in the document are listed in the panel. If the variable is bound to an object, then the Objects column displays the name of the bound object as it appears in the Layers panel.
- A.
- Data set
- B.
- Panel menu
- C.
- Variable type
- D.
- Variable name
- E.
- Name of bound object
The Variables panel uses the following icons to indicate a variable’s type:
Visibility variable
.Text String variable
.Linked File variable
.Graph Data variable
.No Type (unbound) variable
.You can sort the rows by clicking items in the header bar: by variable name, object name, or by variable type.
Create variables
You can create four types of variables in Illustrator: Graph Data, Linked File, Text String, and Visibility. A variable’s type indicates which object attributes are changeable (dynamic).
Create a Visibility variable
Select the objects that you want to show or hide
and click the Make Visibility Dynamic button 
in
the Variables panel.
Create a Text String variable
Select a type object and click the Make Object
Dynamic button 
in
the Variables panel.
Create a Linked File variable
Select a linked file and click the Make Object
Dynamic button in the Variables panel.
in
the Variables panel. To subsequently bind an object to the variable,
select the object and the variable, and click the Make Visibility
Dynamic button or the Make Object Dynamic button.Edit variables
You can edit a variable’s name or type, unbind a variable, and lock a variable using the Variables panel.
Unbinding a variable breaks the link between the variable and its object. Locking variables prevents you from creating variables, deleting variables, and editing variable options. However, you can bind and unbind objects to locked variables.
Change the name and type of a variable
Double-click the variable in the Variables panel.
Alternatively, select the variable in the Variables panel, and choose
Variable Options from the Variables panel menu.
in
the Variables panel, or choose Unbind Variable from the Variables
panel menu.
or 
in
the Variables panel. Delete variables
Deleting a variable removes it from the Variables panel. If you delete a variable that is bound to an object, the object becomes static (unless the object is also bound to a variable of a different type).
Select a variable you want to delete.
Do one of the following:
Click the Delete Variable icon
in
the Variables panel, or choose Delete Variable from the Variables
panel menu. To delete the variable without confirmation, drag it to the Delete Variable icon.
Edit dynamic objects
You change the data associated with a variable by editing the object to which it is bound. For example, if you’re working with a Visibility variable, you change the object’s state of visibility in the Layers panel. Editing dynamic objects lets you create multiple data sets for use in the template.
Select a dynamic object on the artboard, or do one of the following to automatically select a dynamic object:
Alt‑click (Windows) or Option‑click (Mac OS) a variable in the Variables panel.
Select a variable in the Variables panel, and choose Select Bound Object from the Variables panel menu.
To select all dynamic objects, choose Select All Bound Objects from the Variables panel menu.
Edit the data associated with the object as follows:
For text, edit the text string on the artboard.
For linked files, replace the image using the Links panel or the File > Place command.
For graphs, edit the data in the Graph Data dialog box.
For all objects with dynamic visibility, change the state of visibility for the object in the Layers panel.
Identifying dynamic objects using XML IDs
The Variables panel displays the names of dynamic objects as they appear in the Layers panel. If you save the template in SVG format for use with other Adobe products, these object names must conform to XML naming conventions. For example, XML names must begin with a letter, underscore, or colon, and cannot contain spaces.
Illustrator automatically assigns a valid XML ID to every dynamic object you create. To view, edit, and export object names using XML IDs, choose Edit > Preferences > Units (Windows) or Illustrator > Preferences > Units (Mac OS), and select XML ID.
Data sets
A data set is a collection of variables and associated data. When you create a data set, you capture a snapshot of the dynamic data that is currently displayed on the artboard. You can switch between data sets to upload different data into your template.
The name of the current data set is displayed at the top of the Variables panel. If you change the value of a variable so that the artboard no longer reflects the data stored in the set, the name of the data set is displayed in italic type. You can then create a new data set, or you can update the data set to overwrite the saved data with the new data.
Create a data set
Click the Capture Data Set button 
in
the Variables panel. Alternatively, choose Capture Data Set from
the Variables panel menu.
Switch between data sets
Select a data set from the Data Set list in the
Variables panel. Alternatively, click the Previous Data Set button 
or
the Next Data Set button 
.
Apply the data on the artboard to the current data set
Choose Update Data Set from the Variables panel
menu.
About variable libraries
In a collaborative environment, coordination between team members is essential to the success of a project. For example, in a company that creates websites, the web designer is responsible for the look and feel of the site, while the web developer is responsible for the underlying code and scripting. If the designer changes the layout of the web page, those changes must be communicated to the developer. Likewise, if the developer needs to add functionality to the web page, the design may need to be updated.
Variable libraries enable designers and developers to coordinate their work through an XML file. For example, a designer can create a template for business cards in Illustrator and export variable data as an XML file. The developer can then use the XML file to link variables and data sets to a database and write a script to render the final artwork. This workflow can also be reversed, where the developer codes the variable and data set names in an XML file, and the designer imports the variable libraries into an Illustrator document.
To import variables into Illustrator from an XML file, choose Load Variable Library from the Variables panel menu.
To export variables from Illustrator to an XML file, choose Save Variable Library from the Variables panel menu.
Save a template for data-driven graphics
When you define variables in an Illustrator document, you are creating a template for data-driven graphics. You can save the template in SVG format for use with other Adobe products, such as Adobe® Graphics Server. For example, a developer working with Adobe Graphics Server can bind the variables in the SVG file directly to a database or another data source.
Choose File > Save As, enter a filename, select SVG as the file format, and click Save.
Click More Options, and select Include Adobe Graphics Server Data. This option includes all information needed for variable substitution in the SVG file.
Click OK.
