Colorization Quick Start

On this page we present a simple "quick start" run-through showing how to parameterize an SVG to allow for colorization and use the Product Customization app to preview and publish the asset.

Step 1: Parameterize the SVG

As the basis of this example, a designer has created an SVG image of an armchair that includes the necessary filters to support colorization. Take a look at the creating a colorized product image tutorial for a step by step guide to creating an SVG ready for parameterization.

Right click and save as to download the SVG XML code for this example.

When modifying the SVG XML code for this image, we will be referencing our ampsvg namespace. So before making any further modifications to the file, we must include the namespace definition in the list of namespaces at the head of the file like this:

<svg
   xmlns:ampsvg="http://media.amplience.com/2016/svg-extensions"

In order to parameterize the SVG for colorization, the following code snippet is inserted into the <metadata> section of the SVG XML.

<ampsvg:metadata>
        <ampsvg:substitutions> 
        <ampsvg:substitute type="set-attribute" target="//svg:feFlood[@id='feFlood3574']" attribute="flood-color" value="{$color}"/>
      </ampsvg:substitutions>
      <ampsvg:tokens> 
        <ampsvg:token name="color" data-type="color" description="Color" default="rgb(51,110,159)"/>
      </ampsvg:tokens>
    </ampsvg:metadata>

The substitutions tag defines a parameter named $color that can be provided to Dynamic Media, and it also sets the mapping of that parameter value onto the flood-color attribute of the flood filter that was already defined in the SVG file as shown here: (it's what defines the color of the armchair):

<filter
       style="color-interpolation-filters:sRGB"
       id="filter3564"
       inkscape:label="Colorize">
      <feFlood
         id="feFlood3574"
         flood-color="rgb(51,110,159)"
         result="result4"
         flood-opacity="1" />

The tokens tag of our newly-inserted metadata instructs the application to allow the substitution parameter value to be changed via the user interface.

Once parameterized, we upload the SVG to Content Hub.

Step 2: Locate the SVG in the SVG Library

In this step we locate the SVG image in the SVG Library of the application. Select the "View contact sheet" option from the menu.

This will take you to the contact sheet which will be empty at this point. Click the "Add Preview" button.

Step 3: Preview the SVG

Now it's time to preview and test colorized variants of the SVG, which means:

• Changing the substitution parameter value for the armchair material color.
• The preview will generate automatically
• Selecting pass or fail will add the preview to the contact sheet

Step 4: View the Contact Sheet

Having run the preview process (Step 3) several times, we can then view the variants of the SVG image via the Contact Sheet:

Step 5: Publish the Image

The final step of the quick-start process is to publish the image, which can be done from the SVG Library as shown here:

Note that the application supports a workflow for reviewing and approving SVG variants. See the [workflow.md] page for more details.

Step 6: Manipulating the image dynamically

Once the SVG is published, you can retrieve its URL by choosing "Get live URL" from its menu. You can then change the color dynamically by appending ?color= to the URL. For example:

http://cdn.graphics.amplience.net/v1/media/graphics/i/ampproduct/Armchair-configurator?color=lightgreen

Related pages

Monogramming quickstart