SVG-Vorlagen für den Produktdesigner

Zuletzt aktualisiert: 11. November 2026

Mit einer SVG-Vorlage folgt das Produktbild der Konfiguration: Ein Anhänger wird so breit und hoch gezeichnet, wie dein Kunde ihn bestellt, bekommt runde Ecken oder ein Loch, und die Gestaltungsfläche für eigenen Text oder eigenes Bild wächst mit. Du brauchst dafür kein eigenes Bild für jede Größe und jede Variante.

Voraussetzungen

Frontend-Engine V3. Legacy zeigt die Vorlage nicht an. Siehe Frontend-Engine: Legacy oder V3.
Kombiniertes Produktbild. Die Vorlage ist das Bild eines Werts im kombinierten Produktbild, z. B. beim Merkmal Papier. Die Gestaltungsfläche liest configento.app aus dem untersten Bild, also dem Grundprodukt. Siehe Bildvisualisierung.
Merkmale mit internem Namen. Die Vorlage liest Werte über den Internen Namen (ID) eines Merkmals, z. B. $laenge für die Länge in mm.

So ist eine Vorlage aufgebaut

Eine SVG-Vorlage ist eine normale SVG-Datei, in deren Attributen Platzhalter in doppelten geschweiften Klammern stehen. Der Konfigurator füllt sie bei jeder Auswahl neu und zeichnet das Ergebnis ins Produktbild.

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

viewBox in Millimetern. Eine Einheit in der Vorlage ist ein Millimeter auf dem Produkt. Hier ist der Anhänger $laenge × $hoehe mm groß, mit 2 mm Luft rundherum.
width und height bestimmen, wie groß das Bild gezeichnet wird. Die Wurzel braucht width und height oder eine viewBox, sonst wird die Datei beim Hochladen abgelehnt.
Runde Ecken und Loch hängen an Auswahl-Merkmalen: $ecken == 'rund' ? 3 : 0 setzt den Eckenradius auf 3 mm, wenn der Wert rund gewählt ist.
Die Gestaltungsfläche ist das Rechteck mit data-configento-zone (siehe unten).

Diese Vorlage kannst du als Startpunkt herunterladen: hangtag.svg. Ersetze die Namen hinter $ durch die internen Namen deiner Merkmale.

Platzhalter

In {{ … }} steht ein Ausdruck in derselben Schreibweise wie bei einem Formel-Merkmal:

Was	Beispiel
Wert eines Merkmals	`{{$laenge}}`
Rechnen	`{{$laenge - 10}}`, `{{($hoehe + 4) * 4}}`
Wenn – dann – sonst	`{{$ecken == 'rund' ? 3 : 0}}`
Text oder Farbe	`{{$karton == 'schwarz' ? '#1a1a1a' : '#ffffff'}}`

Bei Auswahl-Merkmalen vergleichst du mit dem Wert des Eintrags, nicht mit seiner Bezeichnung.
Zahlen werden auf drei Nachkommastellen gerundet. Ist ein Merkmal leer, setzt der Konfigurator 0 ein.
Platzhalter wirken in Attributen, also z. B. in width, rx, fill oder viewBox.
Schreib < und > in der SVG-Datei als < und >, z. B. {{$laenge > 80 ? 4 : 2}}. Der Konfigurator wandelt sie vor dem Rechnen zurück.

Die Gestaltungsfläche festlegen

Ein Rechteck mit data-configento-zone="…" legt fest, wo ein eigener Text oder ein eigenes Bild steht. Trage dort den Internen Namen (ID) des Merkmals vom Typ Eigener Text auf dem Produkt bzw. Eigenes Bild auf dem Produkt ein.

x, y, width und height des Rechtecks sind Position und echte Größe der Fläche in mm. Daraus berechnet configento.app Schriftgrößen und die Auflösung eines Bildes.
Die Fläche aus der Vorlage geht der im Editor gezogenen Fläche vor, ebenso Breite aus und Höhe aus.
Mit fill="none" bleibt das Rechteck unsichtbar.
Die Vorlage braucht dafür eine viewBox.

Mehrere Merkmale bekommen je ein eigenes Rechteck. Auch die Preisprüfung beim Warenkorb liest die Vorlage, Größe und Auflösung in der Bestellung stimmen also mit dem Browser überein.

Untergrund für die Kontrastprüfung

Prüft ein eigener Text den Kontrast, kann die Vorlage den Untergrund liefern. Gib dem Rechteck der Gestaltungsfläche data-configento-bg:

<rect data-configento-zone="markenname" x="5" y="15"
      width="{{$laenge - 10}}" height="{{$hoehe - 20}}" fill="none"
      data-configento-bg="{{$karton == 'schwarz' ? '#1a1a1a' : '#f4efe4'}}"/>

Der Wert muss eine sechsstellige Hex-Farbe wie #1a1a1a sein; leer heißt: keine Prüfung. Ist beim eigenen Text unter Kontrastprüfung ein Untergrund eingetragen, gilt dieser.

Sicherheitsabstand und Lochung

Beim Zuschnitt oder Stanzen kann am Rand etwas verloren gehen. Zwei Attribute halten Text und Bild davon fern:

data-configento-safe-mm="3" am Rechteck der Gestaltungsfläche: der Abstand in mm, den Text und Bild zum Rand der Fläche halten sollen.
data-configento-keepout an einem rect, circle oder ellipse: eine Fläche, die frei bleiben muss, z. B. das Loch eines Anhängers. Schreib das Attribut als data-configento-keepout="", denn SVG verlangt einen Wert. Sperrflächen gelten für alle Gestaltungsflächen, auch aus einer Ebene darüber, etwa beim Merkmal Lochung, wenn deren Vorlage dieselbe viewBox hat.

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

Kommt ein Text oder Bild dem Rand näher als der Abstand oder berührt es die Lochung, zeigt das Feld „Zu nah am Rand oder an der Lochung: Dieser Teil kann beim Zuschnitt oder Stanzen verloren gehen.“ Ob der Konfigurator dann nur warnt oder auch den Warenkorb sperrt, stellst du am Merkmal ein. Mehr dazu: Eigener Text auf dem Produkt und Eigenes Bild auf dem Produkt.

Hochladen

Lade die Vorlage wie jedes andere Bild beim Wert hoch (SVG bis 5 MB). Beim Hochladen bereinigt configento.app die Datei:

Skripte werden entfernt.
Verweise auf Dateien auf anderen Servern werden entfernt, z. B. eingebundene Bilder. Bette Bilder deshalb direkt ein oder lege sie als eigene Ebene an.
Platzhalter und data--Attribute bleiben erhalten.

360°-Bilder können keine SVG-Dateien sein.

Fehlersuche

Die Datei wird beim Hochladen abgelehnt: Der Wurzel <svg> fehlen width und height und auch eine viewBox.
Eine Form ist 0 groß oder verschwindet: Der Platzhalter ergibt 0. Prüfe den Internen Namen (ID) samt Groß- und Kleinschreibung und ob das Merkmal einen Wert hat.
Ein Vergleich greift nie: Vergleiche mit dem Wert des Eintrags, z. B. rund, nicht mit der Bezeichnung Rund.
Der Text bleibt an der alten Stelle: data-configento-zone muss genau den internen Namen des Text- bzw. Bild-Merkmals tragen, und die Vorlage braucht eine viewBox.
Der Kontrast wird nicht geprüft: data-configento-bg ergibt keine sechsstellige Hex-Farbe, oder der Text hat keinen Min. Kontrast.
Die Lochung wird nicht beachtet: Die Form mit data-configento-keepout ist kein rect, circle oder ellipse, oder ihre Ebene hat eine andere viewBox als die Vorlage.

Nächste Schritte

← Alle Artikel 14 Tage kostenlos testen