Skip to main content

Illustration Step

Illustration Element

The illustration step allows users to pick between a predetermined list of vector assets configured in the workflow editor. The user may also select different colors for the various color channels on the vector, however this is not required.

Selecting an Illustration​

The base option type for an illustration step is the Illustration asset. These are vectors that you have uploaded to the spiff hub. After configuring an option with multiple illustrations in the hub you may select a specific illustration by passing the corresponding variant to the selectVariant function.

await illustrationStep.selectVariant(variant);

Getting color channels​

Before we display an illustration we parse the SVG document and assign an ID to each fillable or strokeable attribute. This ID is unique to a specific color value and allows you to target and modify the color value of all elements of the document that share that starting color.

You can get a list of all the available color channel IDs and the color definitions currently assigned to them by calling the following function.

const colorChannels = await illustrationStep.getColors();

This function returns an objects where the keys are channel ID strings and the values are ColorDefinition objects that tell you the fill color and any additional spot color information if relevant.

Setting color channels​

You can set individual colors on the illustration SVG by calling the setColor function. The color will be saved as a key value pair. You can only set one color at a time. Please await the result before allowing the user to set other colors on the illustration.

await illustrationStep.setColor(key, value);