Modèles SVG pour le concepteur de produits

Dernière mise à jour: 11. novembre 2026

Avec un modèle SVG, l'image du produit suit la configuration : une étiquette est dessinée aussi large et haute que votre client la commande, reçoit des coins arrondis ou un trou, et la zone de conception du texte personnalisé ou de l'image personnalisée suit. Vous n'avez pas besoin d'une image distincte pour chaque taille et chaque variante.

Prérequis

Moteur frontend V3. Legacy n'affiche pas le modèle. Voir Moteur frontend : Legacy ou V3.
Image de produit combinée. Le modèle est l'image d'une valeur dans l'image de produit combinée, p. ex. pour la caractéristique Papier. configento.app lit la zone de conception dans l'image la plus basse, c'est-à-dire le produit de base. Voir Visualisation et chargement d'images.
Caractéristiques avec un nom interne. Le modèle lit les valeurs via le Nom interne (ID) d'une caractéristique, p. ex. $longueur pour la longueur en mm.

Structure d'un modèle

Un modèle SVG est un fichier SVG ordinaire dont les attributs contiennent des espaces réservés entre doubles accolades. Le configurateur les remplit à chaque sélection et dessine le résultat dans l'image du produit.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-2 -2 {{$longueur + 4}} {{$hauteur + 4}}"
     width="{{($longueur + 4) * 4}}" height="{{($hauteur + 4) * 4}}">
  <rect x="0" y="0" width="{{$longueur}}" height="{{$hauteur}}"
        rx="{{$coins == 'arrondis' ? 3 : 0}}" fill="#f4efe4" stroke="#cfc6b4" stroke-width="0.4"/>
  <circle cx="{{$longueur / 2}}" cy="8" r="{{$trou == 'sans' ? 0 : 2.5}}"
          fill="#ffffff" stroke="#cfc6b4" stroke-width="0.4"/>
  <rect data-configento-zone="marque" x="5" y="15"
        width="{{$longueur - 10}}" height="{{$hauteur - 20}}" fill="none"/>
</svg>

viewBox en millimètres. Une unité du modèle correspond à un millimètre sur le produit. Ici, l'étiquette mesure $longueur × $hauteur mm, avec 2 mm d'espace autour.
width et height déterminent la taille à laquelle l'image est dessinée. La racine a besoin de width et height ou d'une viewBox, sinon le fichier est refusé au chargement.
Les coins arrondis et le trou dépendent de caractéristiques de sélection : $coins == 'arrondis' ? 3 : 0 met le rayon des coins à 3 mm lorsque la valeur arrondis est choisie.
La zone de conception est le rectangle portant data-configento-zone (voir ci-dessous).

Vous pouvez télécharger ce modèle comme point de départ : hangtag.svg. Remplacez les noms après $ par les noms internes de vos caractéristiques.

Espaces réservés

Entre {{ … }} figure une expression écrite comme dans une caractéristique formule :

Quoi	Exemple
Valeur d'une caractéristique	`{{$longueur}}`
Calcul	`{{$longueur - 10}}`, `{{($hauteur + 4) * 4}}`
Si – alors – sinon	`{{$coins == 'arrondis' ? 3 : 0}}`
Texte ou couleur	`{{$carton == 'noir' ? '#1a1a1a' : '#ffffff'}}`

Pour les caractéristiques de sélection, comparez avec la Valeur de l'entrée, pas avec son libellé.
Les nombres sont arrondis à trois décimales. Si une caractéristique est vide, le configurateur utilise 0.
Les espaces réservés agissent dans les attributs, p. ex. dans width, rx, fill ou viewBox.
Écrivez < et > sous la forme < et > dans le fichier SVG, p. ex. {{$longueur > 80 ? 4 : 2}}. Le configurateur les reconvertit avant le calcul.

Définir la zone de conception

Un rectangle portant data-configento-zone="…" définit où se place un texte ou une image personnalisés. Indiquez-y le Nom interne (ID) de la caractéristique de type Texte personnalisé sur le produit ou Image personnalisée sur le produit.

x, y, width et height du rectangle sont la position et la taille réelle de la zone en mm. configento.app en déduit les tailles de police et la résolution d'une image.
La zone du modèle prime sur la zone tracée dans l'éditeur, ainsi que sur Largeur depuis et Hauteur depuis.
Avec fill="none", le rectangle reste invisible.
Le modèle a besoin pour cela d'une viewBox.

Plusieurs caractéristiques reçoivent chacune leur propre rectangle. La vérification des prix au panier lit aussi le modèle : la taille et la résolution dans la commande correspondent donc à celles du navigateur.

Fond pour le contrôle du contraste

Si un texte personnalisé contrôle le contraste, le modèle peut fournir le fond. Donnez au rectangle de la zone de conception data-configento-bg :

<rect data-configento-zone="marque" x="5" y="15"
      width="{{$longueur - 10}}" height="{{$hauteur - 20}}" fill="none"
      data-configento-bg="{{$carton == 'noir' ? '#1a1a1a' : '#f4efe4'}}"/>

La valeur doit être une couleur hexadécimale à six chiffres comme #1a1a1a ; vide signifie aucun contrôle. Si un Fond est saisi sur le texte personnalisé sous Contrôle du contraste, c'est celui-ci qui s'applique.

Marge de sécurité et trou

La découpe ou le poinçonnage peut emporter un peu du bord. Deux attributs tiennent le texte et l'image à distance :

data-configento-safe-mm="3" sur le rectangle de la zone de conception : la distance en mm que le texte et l'image doivent garder par rapport au bord de la zone.
data-configento-keepout sur un rect, circle ou ellipse : une surface qui doit rester libre, p. ex. le trou d'une étiquette. Écrivez l'attribut sous la forme data-configento-keepout="", car SVG exige une valeur. Les zones interdites valent pour toutes les zones de conception, y compris depuis un calque supérieur, par exemple pour la caractéristique Trou, si son modèle a la même viewBox.

<circle cx="{{$longueur / 2}}" cy="8" r="{{$trou == 'sans' ? 0 : 2.5}}"
        fill="#ffffff" data-configento-keepout=""/>
<rect data-configento-zone="marque" data-configento-safe-mm="3"
      x="5" y="15" width="{{$longueur - 10}}" height="{{$hauteur - 20}}" fill="none"/>

Si un texte ou une image s'approche du bord plus que la marge ou touche le trou, le champ affiche « Trop près du bord ou du trou : cette partie risque d'être coupée ou perforée. » Le choix entre un simple avertissement et le blocage du panier se règle sur la caractéristique. Plus d'informations : Texte personnalisé sur le produit et Image personnalisée sur le produit.

Chargement

Chargez le modèle comme toute autre image sur la valeur (SVG jusqu'à 5 Mo). Au chargement, configento.app nettoie le fichier :

Les scripts sont supprimés.
Les références à des fichiers sur d'autres serveurs sont supprimées, p. ex. des images liées. Intégrez donc les images directement ou ajoutez-les comme calque distinct.
Les espaces réservés et les attributs data- sont conservés.

Les images à 360° ne peuvent pas être des fichiers SVG.

Dépannage

Le fichier est refusé au chargement : la racine <svg> n'a ni width et height, ni viewBox.
Une forme a une taille nulle ou disparaît : l'espace réservé donne 0. Vérifiez le Nom interne (ID), majuscules et minuscules comprises, et si la caractéristique a une valeur.
Une comparaison ne fonctionne jamais : comparez avec la Valeur de l'entrée, p. ex. arrondis, et non avec le libellé Arrondis.
Le texte reste à l'ancien emplacement : data-configento-zone doit porter exactement le nom interne de la caractéristique de texte ou d'image, et le modèle a besoin d'une viewBox.
Le contraste n'est pas contrôlé : data-configento-bg ne donne pas une couleur hexadécimale à six chiffres, ou le texte n'a pas de Contraste min.
Le trou n'est pas pris en compte : la forme portant data-configento-keepout n'est pas un rect, circle ou ellipse, ou son calque a une autre viewBox que le modèle.

Étapes suivantes

← Tous les articles Essai gratuit 14 jours