---
canonical: https://amplience.com/developers/docs/dev-tools/guides-tutorials/product-customization/monograms/
title: Monogramming quick start
description: Monogramming quick start showing how to parameterize an SVG to support monogramming and use the Product Customization app to preview and publish the asset.
image: https://cdn.media.amplience.net/i/ampproduct/monogramming-quickstart-1?w=1200&h=630
image_width: 1200
image_height: 630
audience: Developer
date_published: 2024-01-30
date_modified: 2024-02-02
---

# Monogramming quick start

On this page we present a simple "quick start" run-through showing how to parameterize an SVG to support monogramming 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 a
football shirt that includes monogrammed text that can be changed.

![The SVG of a football shirt used in this tutorial](https://cdn.media.amplience.net/i/ampproduct/monogramming-quickstart-7?w=300 'The SVG of a football shirt used in this tutorial')

Right click and save as to [download](https://amp-product.s3-eu-west-1.amazonaws.com/svgs/shirtbiggerNew.svg)
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:

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

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

```xml
<ampsvg:metadata>
	    <ampsvg:substitutions>
			<ampsvg:substitute type="set-innerText" target="//svg:tspan[@id='tspanShirtName']" value="{$name}" />
		</ampsvg:substitutions>
      <ampsvg:tokens>
		<ampsvg:token name="name" data-type="text" description="Name" default="MATT"/>
      </ampsvg:tokens>
    </ampsvg:metadata>
```

The `substitutions` tag defines the parameter `$name` that can be provided to the Dynamic Media service. The `substitutions` tag also sets the mapping of those parameter values into the `tspan` tags that were already defined in the SVG file:

```xml
<tspan id="tspanShirtName">MATTHEW</tspan>
```

Note that these tspan tags have been simplified for presentation here, by removing the font information.

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

Once parameterized, we upload the SVG to Content Hub.

## Step 2: Locate the SVG in the library

In this step we locate the SVG image and navigate to the Preview Screen.
Double clicking the SVG will take you to the contact sheet and from
there you are able to create a new preview.

![Viewing the SVG in the Product Customization app](https://cdn.media.amplience.net/i/ampproduct/monogramming-quickstart-1?w=1880&fmt=png 'Viewing the SVG in the Product Customization app')

## Step 3: Preview the SVG

Now it's time to preview and test the monogrammed variants of the SVG:

- Changing the substitution parameter value for the shirt `name`.

- Previews will be generated automatically and can be added to the
  contact sheet by selecting pass or fail.

![Previewing a variant](https://cdn.media.amplience.net/i/ampproduct/monogramming-quickstart-2?w=1880&fmt=png 'Previewing a variant')

## Step 4: View the Contact Sheet

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

![The contact sheet showing the variants we created](https://cdn.media.amplience.net/i/ampproduct/monogramming-quickstart-3?w=1880&fmt=png 'The contact sheet showing the variants we created')

## 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 by selecting Publish on the contextual
menu:

![Publishing the SVG](https://cdn.media.amplience.net/i/ampproduct/monogramming-quickstart-4?w=1880&fmt=png 'Publishing the SVG')

## Step 6: Manipulating the image dynamically

Once the SVG is published, you can change the name dynamically by appending `?name=` to the URL. For example:

```
http://cdn.graphics.amplience.net/v1/media/graphics/i/ampproduct/shirtbiggerNew?name=Amplience
```

> **Tip: Using media delivery URLs for SVG images**
> For SVG images you should use media delivery URLs in the format shown above. For more information, see [URLs for SVG images](https://amplience.com/developers/docs/knowledge-center/faqs/assets/#urls-for-svg-images).

The Dynamic Media service will rasterize the SVG with the parameters you've provided into an image that is displayed in the browser. You can also use [Dynamic Media parameters](https://amplience.com/developers/docs/apis/media-delivery/media-delivery-reference) to manipulate the image.

![Manipulating the SVG dynamically and displaying the rasterized image in the browser](https://cdn.media.amplience.net/i/ampproduct/monogramming-quickstart-6?w=1880&fmt=png 'Manipulating the SVG dynamically and displaying the rasterized image in the browser')

## Related pages

[Creating a colorized product image](colorization.md)