> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Shadowbox-SVGs: Zusammenhängende Papierebenen gestalten

> Gestalte eine Shadowbox-SVG mit ausgerichteten Rahmen, verbundenen Papierformen und geprüfter Stapelreihenfolge. Sieh, wie ein loser Mond die gespeicherte Geometrie verändert.

Source: https://perfectvector.com/de/blog/shadow-box-svg-connected-layers

Language: de
Author: Irene Kim
Published: 2026-10-08T08:00:00+09:00
Updated: 2026-10-08T08:00:00+09:00

Für eine mehrschichtige Shadowbox-SVG gestaltest du jede Tiefenebene als zusammenhängende Platte: einen Rahmen, das Motiv dieser Tiefe und genügend Verbindungsgeometrie, damit das vorgesehene Papier zusammenbleibt. Gib jeder Platte dieselben Außenmaße, vereinige überlappende Materialformen und prüfe anschließend, was die vorderen Platten verdecken.

Diese Anleitung verwendet eine Bergszene aus drei Platten, um SVG-Gestaltung und Dateivorbereitung zu zeigen. Wir prüften die gespeicherten Konturen und renderten sie in einem Browser. Wir importierten diese Dateien weder in Cricut Design Space noch schnitten wir Papier. Die Stabilität der Stege, Materialeinstellungen und physische Montage müssen deshalb noch getestet werden.

## Entscheide, was auf welche Papierplatte gehört

Eine **Tiefenebene** ist eine Platte, die vor oder hinter einer anderen liegt. Ihre Farbe kann bei der Identifikation am Bildschirm helfen, doch ihre Aufgabe ergibt sich aus Position und Form. Eine PNG nach Farben zu trennen legt diese Beziehungen nicht fest. Für Vinyl oder flach übereinandergelegte Farben nutze die separate [Anleitung zu mehrschichtigen SVGs für Cricut](https://perfectvector.com/de/blog/layered-svg-for-cricut).

**Positives Material** bezeichnet das Papier, das du behalten möchtest. Eine **Aussparung** ist eine Öffnung, die du entfernst. Ein **Steg** ist ein Streifen positiven Materials, der ein Detail mit dem Rest seiner Platte verbindet. Eine **schwebende Insel** ist erhaltenes Material ohne Verbindung zu dieser Platte.

Im folgenden Beispiel trägt die hintere Platte Berge und Mond. Die mittlere enthält einen Baum und den Boden. Die vordere ergänzt eine niedrige Böschung. Jede Platte besitzt einen Außenrahmen, mit dem alle erhaltenen Details verbunden sind.

**Gespeichertes SVG-Gestaltungsbeispiel**

![Browserdarstellung dreier zusammenhängender 200-mm-SVG-Platten, eines Gegenbeispiels mit losem Mond und ihres ausgerichteten flachen Stapels](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp)

*Die drei Platten enthalten jeweils eine zusammenhängende positive Fläche. Die Version mit losem Mond enthält zwei. Der flache Stapel zeigt, welche Formen andere verdecken; er simuliert weder Papierstabilität noch physische Tiefe.*

## Konstruiere drei Ebenen mit gemeinsamen Außenmaßen

Du brauchst einen Vektoreditor mit Subtraktion und Vereinigung von Formen, ein einfaches Motiv und die Maße deines vorgesehenen Rahmens. Behalte vor dem Vereinigen der Formen einen bearbeitbaren Master. Wenn du bereits brauchbare Vektorgrafiken hast, beginne damit. Liegt dein Motiv nur als PNG oder JPG vor, gewinne zuerst seine Pfade und gestalte die Papierverbindungen anschließend separat.

### 1. Erstelle einen Rahmen und dupliziere ihn

Miss den verfügbaren Platz für die Platten im Rahmen. Berücksichtige den Platzbedarf der Rückwand und der geplanten Abstandhalter, bevor du die endgültige Projektgröße wählst.

Unsere Dateien verwenden ein äußeres Quadrat von **200 × 200 mm** mit einem **12 mm breiten Rahmenband**. Die Öffnung reicht von x = 12 bis 188 mm und y = 12 bis 188 mm. Das sind Beispielmaße, keine empfohlene Passform für jeden Rahmen.

Zeichne das äußere Quadrat und ein zentriertes kleineres Quadrat. Ziehe das kleinere ab, um die Öffnung zu erzeugen, und dupliziere diesen Rahmen für die drei Platten. Inkscape dokumentiert **Differenz** als Subtraktion und **Vereinigung** als Beibehalten des gemeinsamen Umrisses ausgewählter Pfade. Bei Differenz ist die Stapelreihenfolge wichtig: Die abzuziehende Form liegt über der Form, die du behältst. [Boolesche Operationen in Inkscape](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html)

Verwende auf jeder Ebene denselben Seitenursprung und dasselbe äußere Quadrat. Beschneide nicht jeden Export auf sein einzelnes Motiv. Alle Beispieldateien deklarieren `width="200mm"`, `height="200mm"` und `viewBox="0 0 200 200"`; ihre gespeicherte Geometrie hat dieselben 200-mm-Grenzen. Die SVG-`viewBox` definiert das Koordinatenrechteck, das auf den Ansichtsbereich abgebildet wird. Bestätige die physischen Maße in der Zielanwendung erneut. [W3C-SVG-Koordinatensysteme](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute)

### 2. Verbinde die hintere Szene mit ihrem Rahmen

Platziere eine Bergsilhouette so, dass ihre Basis das untere Rahmenband überlappt. Ergänze darüber den Mond. Ein allein in der Öffnung liegender Mond ist ein separates Stück erhaltenen Papiers. Er benötigt deshalb eine bewusste Verbindung, wenn die hintere Platte einteilig bleiben soll.

In unserem Beispiel liegt der Mondmittelpunkt bei **x = 145, y = 46 mm**, mit einem nominellen Radius von **14 mm**. Ein senkrechtes Rechteck von **x = 143 bis 147 mm** verbindet ihn mit dem oberen Rahmen. Dieses Rechteck überlappt vor der Vereinigung sowohl den Mond als auch den Rahmen.

Vereinige Rahmen, Berge, Mond und Steg. Prüfe den entstandenen Umriss. Die Überlappungsgrenzen zwischen den ursprünglichen Objekten sollten verschwinden und nicht als zusätzliche innere Schnittkonturen erhalten bleiben.

Der Beispielsteg ist **4 mm breit**. Diese Zahl beschreibt die von uns geprüfte Datei. Sie legt keine Mindestbreite für dein Papier, die Spannweite, Maschine oder Endgröße fest. Erstelle einen kleinen Test mit dem vorgesehenen Material und der vorgesehenen Geometrie.

### 3. Verbinde das mittlere Motiv über seine Basis

Halte Baumkrone, Stamm und Boden verbunden. In diesem Beispiel ist der Stamm **8 mm breit**, von x = 56 bis 64 mm. Er überlappt Krone und Boden, und der Boden überlappt das untere Rahmenband. Vereinige diese Formen zur mittleren Platte.

Ein Auge, Stern oder eine Buchstabenpunze kann verändern, welche Bereiche verbunden bleiben. Prüfe solche Details als positives Material oder Aussparungen, bevor du sie vereinfachst. Füllt sich eine Öffnung nach dem Export unerwartet, folge der [Diagnose für SVG-Löcher und Füllregeln](https://perfectvector.com/de/blog/svg-holes-fill-in).

### 4. Halte den Vordergrund niedrig genug, um das Motiv zu zeigen

Ergänze am dritten Rahmen eine niedrige Böschung und vereinige sie mit dem unteren Band. Richte die drei Platten aus, mit den Bergen hinter dem Baum und der Böschung davor.

**Verdeckung** bedeutet, dass eine Form aus der Blickrichtung eine andere verbirgt. In unserem flachen Stapel verdeckt der Baum einen Teil der Berge und die Böschung die Baumbasis. Der Mond bleibt sichtbar. Verbirgt die Böschung die Baumkrone oder ein anderes vorgesehenes Hauptdetail, senke sie ab oder verschiebe das Motiv vor dem Export.

Ein Bildschirmstapel hilft, die Beziehungen sichtbarer Formen zu prüfen. Abstandhalterdicke, Blickwinkel, Beleuchtung und die im Rahmen verfügbare Tiefe benötigen ein physisches Modell.

## Prüfe Materialverbindungen in der gespeicherten SVG

Ein einzelnes Pfadelement kann mehrere unverbundene Formen enthalten. **Pfade zu zählen ist keine Verbindungsprüfung.** Ein zusammengesetzter Pfad enthält mehrere Konturen in einem Pfadobjekt; seine Füllregel bestimmt, welche eingeschlossenen Flächen gefüllt werden. Die SVG-Spezifikation definiert diese Füllregeln einschließlich `evenodd`, das unsere Dateien verwenden. [W3C-SVG-Füllungen und Füllregeln](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty)

Wir erstellten die Beispielplatten durch Vereinigung ihrer positiven Flächen, exportierten geschlossene Konturen und rekonstruierten die gefüllten Flächen aus den gespeicherten SVG-Daten. So wurde die tatsächliche Exportgeometrie geprüft statt eines Stapels überlappender farbiger Formen.

| Gespeicherte Datei        | Zusammenhängende positive Flächen | Aussage der Prüfung                                 |
| ------------------------- | --------------------------------- | --------------------------------------------------- |
| Hinten: Berge, Mond, Steg | 1                                 | Der Mond ist über den Steg mit dem Rahmen verbunden |
| Mitte: Baum und Boden     | 1                                 | Krone, Stamm, Boden und Rahmen bilden eine Fläche   |
| Vorn: niedrige Böschung   | 1                                 | Die Böschung ist mit dem Rahmen verbunden           |
| Hintere Platte ohne Steg  | 2                                 | Der Mond ist eine separate positive Insel           |

Alle vier Dateien enthalten ein Pfadelement. Die verbundenen Platten besitzen jeweils zwei geschlossene Konturen: die Außengrenze und die Grenze der Öffnung. Die Version mit schwebendem Mond hat eine dritte Kontur für den separaten Mond. Deshalb sagt ein Ebenenname, eine Gruppe oder die Pfadzahl allein nicht, ob das vorgesehene Blatt zusammenhängend bleibt.

Für deinen eigenen Export:

1. Öffne die gespeicherte SVG erneut und betrachte jede Platte allein mit einer einfachen Füllung.
2. Verfolge von jedem Detail zum Rahmen eine durchgehende Route durch erhaltenes Material. Vergrößere Stellen, an denen Formen sich fast treffen; ein Punktkontakt bietet keinen messbaren Papierstreifen.
3. Prüfe die Konturen um verbundene Objekte. Verschmelze Überlappungsnähte, die Material teilen würden, das du behalten möchtest.
4. Prüfe Öffnungen als Geometrie. Eine über eine andere Form gemalte weiße Form kann wie ein Loch aussehen, ohne die darunterliegende Kontur zu entfernen.
5. Setze aus den gespeicherten Ebenen mit gemeinsamem Ursprung und gleichen Maßen erneut eine flache Vorschau zusammen.

Bleibt ein Detail isoliert, ergänze und vereinige einen Steg, verschiebe das Detail auf verbundenes Material, mache daraus eine Aussparung oder plane es als separat befestigtes Teil. Halte diese Entscheidung im Montageplan ausdrücklich fest.

## Wo PerfectVector bei Rastermotiven hilft

PerfectVector kann bearbeitbare SVG-Pfade aus geeigneten PNG- oder JPG-Grafiken gewinnen. Sein [SVG-für-Cricut-Ablauf](https://perfectvector.com/svg-for-cricut) ermöglicht die Vorschau der Formen und das Verfeinern ihrer Farben vor der Vorbereitung der Zieldatei. Nutze diesen Schritt für ein Rastermotiv, das du wiederverwenden möchtest; Rahmenkonstruktion, Stege und Tiefenreihenfolge bleiben separate Gestaltungsarbeit.

Beginne mit einer markanten Silhouette oder einfachen flächigen Illustration. Prüfe den gewonnenen Umriss vor dem Platzieren auf einer Platte auf lose Fragmente und fehlende Öffnungen. Die [Anleitung von Linienzeichnung zu SVG](https://perfectvector.com/de/blog/line-art-to-svg) erklärt den Unterschied zwischen einer Umrissnachzeichnung und der ursprünglich gezeichneten Linie.

Bei einem detailreichen Foto musst du entscheiden, welche Objekte auf welcher Tiefe liegen und welche Formen zu Papier werden. Vereinfache diese Formen oder zeichne sie neu, bevor du die Platten planst. Eine automatische Farbtrennung liefert diesen Montageplan nicht.

## Prüfe die Zieldatei und teste anschließend das Material

Deine SVG-Gestaltungsprüfung ist abgeschlossen, wenn die Außenmaße übereinstimmen, die vorgesehenen erhaltenen Flächen verbunden sind, Überlappungsnähte entfernt wurden und der gespeicherte Stapel die richtigen Details zeigt. Behalte beim Master eine nummerierte Ebenenliste, damit die Montagereihenfolge klar ist.

Prüfe vor dem fertigen Projekt Folgendes in deiner tatsächlichen Schneideanwendung und im Rahmen:

* Die importierten Plattenmaße entsprechen der vorgesehenen Größe.
* Die Vorschau erhält die Öffnungen und enthält keine unerwünschten inneren Schnitte.
* Jede Platte besitzt die vorgesehene Schnittbearbeitung und Materialzuweisung.
* Ein kleines Muster des längsten Stegs übersteht Schneiden, Ablösen von der Matte und Handhabung.
* Deine gewählten Abstandhalter passen auf erhaltenes Material und sind durch Öffnungen nicht sichtbar.
* Der zusammengesetzte Stapel passt bei eingesetzter Rückwand in den Rahmen.

Verändert ein Import eine Öffnung oder einen Umriss, kehre zur gespeicherten Geometrie zurück und repariere die betreffende Kontur. Reißt oder verbiegt sich ein Steg, überarbeite seine Breite, Länge, Befestigung oder das Material und teste erneut. Browserrendering allein kann diese physischen Fragen nicht klären. Die [allgemeine Anleitung zur Cricut-SVG-Vorbereitung](https://perfectvector.com/de/blog/svg-files-for-cricut) behandelt die umfassenderen Dateiprüfungen.

## Häufige Fragen

### Kann ich ein Bild automatisch in eine Shadowbox-SVG umwandeln?

Vektorisierung kann Formen aus einem Bild gewinnen, aber Tiefenebenen, Rahmenverbindungen, Aussparungen und Montagereihenfolge musst du weiterhin wählen. Eine einfache Silhouette ist ein sinnvoller Ausgangspunkt. Ein komplexes Foto muss möglicherweise manuell vereinfacht oder neu gezeichnet werden.

### Muss jede Shadowbox-Platte ein SVG-Pfad sein?

Ein Pfad kann getrennte positive Inseln enthalten. Prüfe die erhaltenen Flächen und tatsächlichen Konturen, statt dich auf die Pfadzahl zu verlassen. In unserem Beispiel enthalten sowohl die verbundene hintere Platte als auch das Gegenbeispiel mit losem Mond ein einziges Pfadelement.

### Wie breit sollten die Stege sein?

Wähle und teste sie für dein Material, die Spannweite, Endgröße und den Schneideablauf. Der gezeigte Mondsteg ist 4 mm breit, wurde aber weder geschnitten noch auf Stabilität getestet. Es ist ein Beispielmaß, keine allgemeine Mindestbreite.

### Ist eine Shadowbox-Ebene dasselbe wie eine Cricut-Farbebene?

Eine Shadowbox-Ebene ist eine Platte in einer Tiefenanordnung. Eine Farbebene trennt Grafiken nach Farbe oder Material. Eine Tiefenplatte kann mehrere mit einem Rahmen verbundene Motive enthalten; diese Motive allein nach Farbe zu trennen gestaltet ihre Verbindungen nicht.

## Quellen

1. [Inkscape — Boolesche Operationen](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — dokumentiert Vereinigung, Differenz, Kombinieren und die Rolle der Stapelreihenfolge.
2. [W3C — SVG-Koordinatensysteme, Transformationen und Einheiten](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — definiert das über `viewBox` abgebildete Koordinatenrechteck.
3. [W3C — SVG-Farbauftrag](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — definiert Füllungen, Teilpfade und die im Beispiel verwendete Füllregel `evenodd`.
4. [PerfectVector — SVG für Cricut](https://perfectvector.com/svg-for-cricut) — beschreibt die Wiedergewinnung von Rastergrafiken, Formprüfung und Kontrollen vor dem Schneiden.

***

Wenn dein Motiv als PNG oder JPG vorliegt, [bereite seine SVG-Pfade mit PerfectVector vor](https://perfectvector.com/de/svg-for-cricut) und prüfe anschließend Umriss und Öffnungen. Konstruiere Rahmenverbindungen und Tiefenebenen in deinem Editor, öffne die gespeicherten Platten erneut und teste ein kleines Materialmuster, bevor du die fertige Shadowbox herstellst.

## Explore

- [Read the HTML article](https://perfectvector.com/de/blog/shadow-box-svg-connected-layers)
- [Cricut-Knockout: Grundform und Namensebene planen](https://perfectvector.com/de/blog/cricut-knockout-real-cutouts.md)
- [Warum dein Cricut-SVG so schwer zu entgittern ist (und welchen Teil du in der Datei beheben kannst)](https://perfectvector.com/de/blog/cricut-svg-hard-to-weed.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)