Keep Exact Labels Outside Your Generative Image Edit

An image for a product page often has two different requirements: the scene can vary, while the price, product name, or campaign date must match an exact string. I suggest giving those requirements separate production steps.

Disclosure: I develop iLoveAIImg, a web tool for text-to-image creation, natural-language image editing, and background removal. This article was prepared with AI assistance. The workflow below is a design proposal with an illustrative SVG example, not a benchmark, a measured customer case, or a claim that the product already exports SVG overlays.

Write down what is allowed to change

Before creating a visual, separate three things:

An editing instruction can describe a protected detail, but the instruction itself is not evidence that the detail survived. Keep the source image available for a side-by-side review. If the source already has essential printed text, changing its surroundings still needs that comparison.

Use image creation for the visual layer

For a new conceptual illustration, start from a text prompt. For an existing photo, use a focused edit that names both the change and the parts to preserve. For an object that is already correct, background removal may be the more appropriate first step.

Leave space for the eventual heading or label. “Keep the upper-left area visually quiet” is a layout instruction; it is not a request to generate the final campaign copy. After reviewing the visual, download the version you intend to use and treat it as a fixed input to the next step.

These are the three task types offered by iLoveAIImg. The site has limited free credits and paid options; this workflow does not require an unlimited free plan or an API integration.

Put approved copy in a separate layer

For a web page, ordinary HTML text over a background image can be a useful starting point because the text remains selectable and can follow the page's layout. If you need an SVG composition, here is a minimal static example:

<svg xmlns="http://www.w3.org/2000/svg"
     width="1200" height="630" viewBox="0 0 1200 630"
     role="img" aria-labelledby="title description">
  <title id="title">Autumn product campaign</title>
  <desc id="description">A product visual with a separate campaign label.</desc>
  <image href="./approved-visual.png"
         x="0" y="0" width="1200" height="630"
         preserveAspectRatio="xMidYMid slice" />
  <rect x="48" y="48" width="480" height="124"
        rx="16" fill="#ffffff" fill-opacity="0.94" />
  <text x="72" y="100" fill="#111827"
        font-family="Arial, sans-serif" font-size="32">
    Autumn collection
  </text>
  <text x="72" y="144" fill="#374151"
        font-family="Arial, sans-serif" font-size="24">
    Launches 20 October
  </text>
</svg>

approved-visual.png is a placeholder for an image you have permission to use. This is a standalone composition example, not a product endpoint or a tested image-export pipeline. Inspect the text at its final display size; a fixed font size does not handle every language, long name, or narrow container.

For dynamic copy, insert user-supplied strings as text nodes rather than concatenating them into markup. Plan for wrapping, missing fonts, translations, and right-to-left text before turning this into a reusable component. If you rasterize the composition, check that the image and fonts actually loaded and verify the resulting file rather than relying on the source markup alone.

Review the deliverable at the boundary

Keep a short review record with the source image, selected visual, exact approved strings, output dimensions, and reviewer notes. Check the object against the source, the copy against the text record, and the composition at the actual page or thumbnail size. For a transparent cutout, inspect the edge on both light and dark backgrounds.

The benefit of separate layers is a narrower revision: correcting a date need not involve a new generative image edit. It also makes responsibility clearer. Visual review, copy review, and export review are separate checks, even when one person performs all three.

How do you handle exact copy in your image workflow: HTML overlays, SVG, a design editor, or a dedicated compositor? I would be interested in the failure cases that shaped your choice.