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

# SVG do shadow box: projektuj połączone warstwy papieru

> Zaprojektuj SVG do shadow box ze spasowanymi ramkami, połączonymi kształtami papieru i sprawdzoną kolejnością. Zobacz wpływ luźnego księżyca na zapisaną geometrię.

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

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

Aby stworzyć warstwowy SVG do shadow box, zaprojektuj każdą warstwę głębi jako połączony panel: ramkę, grafikę należącą do tej głębokości i wystarczającą geometrię łączącą, aby zamierzony papier trzymał się razem. Nadaj panelom te same wymiary zewnętrzne, scal nakładające się kształty materiału, a następnie sprawdź, co zasłaniają przednie panele.

Ten poradnik wykorzystuje górską scenę z trzech paneli do pokazania projektowania SVG i przygotowania plików. Sprawdziliśmy zapisane kontury i wyrenderowaliśmy je w przeglądarce. Nie importowaliśmy plików do Cricut Design Space ani nie cięliśmy papieru, więc wytrzymałość mostków, ustawienia materiału i fizyczny montaż nadal wymagają testów.

## Ustal, co należy do każdego papierowego panelu

**Warstwa głębi** jest panelem umieszczonym przed innym lub za nim. Kolor może pomagać w identyfikacji na ekranie, ale funkcja panelu wynika z pozycji i kształtu. Podział PNG według kolorów nie ustala tych relacji. Dla winylu lub płaskiego układania kolorów użyj oddzielnego [poradnika warstwowego SVG do Cricut](https://perfectvector.com/pl/blog/layered-svg-for-cricut).

**Materiał dodatni** oznacza papier, który chcesz zachować. **Wycięcie** jest usuwanym otworem. **Mostek** jest paskiem materiału dodatniego łączącym detal z resztą panelu. **Luźna wyspa** jest zachowanym materiałem bez połączenia z panelem.

W poniższym przykładzie tylny panel mieści góry i księżyc. Środkowy zawiera drzewo i grunt. Przedni dodaje niskie wzniesienie. Każdy panel ma zewnętrzną ramkę, a każdy zachowany detal jest z nią połączony.

**Przykład zapisanego projektu SVG**

![Render przeglądarkowy trzech połączonych paneli SVG 200 mm, kontrprzykładu z luźnym księżycem i ich wyrównanego płaskiego złożenia](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp)

*Każdy z trzech paneli zawiera jeden połączony obszar dodatni. Wersja z luźnym księżycem zawiera dwa. Płaskie złożenie pokazuje, które kształty zasłaniają inne; nie symuluje wytrzymałości papieru ani fizycznej głębi.*

## Zbuduj trzy warstwy o wspólnych granicach zewnętrznych

Potrzebujesz edytora wektorowego z odejmowaniem i sumą kształtów, prostego motywu oraz pomiarów docelowej ramki. Zachowaj edytowalny plik główny przed scalaniem. Jeśli masz już użyteczną grafikę wektorową, zacznij od niej. Jeśli motyw istnieje tylko jako PNG lub JPG, najpierw odzyskaj ścieżki, a potem osobno zaprojektuj połączenia papieru.

### 1. Utwórz jedną ramkę i ją powiel

Zmierz przestrzeń dostępną na panele wewnątrz ramy. Przed wyborem końcowego rozmiaru uwzględnij miejsce zajmowane przez podkład i planowane przekładki dystansowe.

Nasze pliki wykorzystują zewnętrzny kwadrat **200 × 200 mm** z **pasem ramki 12 mm**. Otwór rozciąga się od x = 12 do 188 mm i od y = 12 do 188 mm. To przykładowe wymiary, a nie zalecane dopasowanie do każdej ramy.

Narysuj zewnętrzny kwadrat i wyśrodkowany mniejszy kwadrat. Odejmij mniejszy, aby utworzyć otwór, a następnie powiel ramkę dla trzech paneli. Inkscape opisuje **Difference** jako odejmowanie, a **Union** jako zachowanie wspólnego obrysu zaznaczonych ścieżek. Kolejność stosu ma znaczenie przy Difference: odejmowany kształt znajduje się nad zachowywanym. [Operacje logiczne Inkscape](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html)

Używaj tego samego początku strony i zewnętrznego kwadratu na każdej warstwie. Nie przycinaj każdego eksportu do jego własnego motywu. Wszystkie przykładowe pliki deklarują `width="200mm"`, `height="200mm"` i `viewBox="0 0 200 200"`; zapisana geometria ma te same granice 200 mm. `viewBox` SVG określa prostokąt współrzędnych mapowany do viewportu. Ponownie potwierdź wymiary fizyczne w aplikacji docelowej. [Układy współrzędnych SVG W3C](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute)

### 2. Połącz tylną scenę z ramką

Umieść sylwetkę gór tak, aby jej podstawa nachodziła na dolny pas ramki. Dodaj księżyc nad nią. Księżyc stojący samotnie w otworze jest oddzielnym kawałkiem zachowanego papieru, więc potrzebuje świadomego połączenia, jeśli tylny panel ma pozostać jednym elementem.

W naszym przykładzie środek księżyca leży w **x = 145, y = 46 mm**, a nominalny promień wynosi **14 mm**. Pionowy prostokąt od **x = 143 do 147 mm** łączy go z górą ramki. Przed sumowaniem prostokąt nachodzi zarówno na księżyc, jak i ramkę.

Wykonaj sumę ramki, gór, księżyca i mostka. Sprawdź wynikowy kontur. Granice nakładania oryginalnych obiektów powinny zniknąć; nie powinny pozostawać jako dodatkowe wewnętrzne kontury cięcia.

Przykładowy mostek ma **4 mm szerokości**. Ta liczba opisuje sprawdzony plik. Nie ustala minimalnej szerokości dla twojego papieru, rozpiętości, maszyny lub końcowego rozmiaru. Zrób mały test z planowanym materiałem i geometrią.

### 3. Połącz środkowy obiekt przez jego podstawę

Zachowaj połączenie korony drzewa, pnia i gruntu. W tym przykładzie pień ma **8 mm szerokości**, od x = 56 do 64 mm. Nachodzi na koronę i grunt, a grunt nachodzi na dolny pas ramki. Zsumuj te kształty w środkowy panel.

Oko, gwiazda lub otwór litery mogą zmieniać, które obszary pozostaną połączone. Przed uproszczeniem oceń te detale jako materiał dodatni lub wycięcia. Jeśli otwór nieoczekiwanie wypełni się po eksporcie, zastosuj [diagnozę otworów i reguł wypełnienia SVG](https://perfectvector.com/pl/blog/svg-holes-fill-in).

### 4. Zachowaj pierwszy plan na tyle nisko, by odsłaniał temat

Dodaj niskie wzniesienie do trzeciej ramki i scal je z dolnym pasem. Wyrównaj trzy panele: góry za drzewem, a wzniesienie przed nim.

**Zasłanianie** oznacza, że jeden kształt ukrywa drugi z kierunku oglądania. W naszym płaskim złożeniu drzewo zakrywa część gór, a wzniesienie podstawę drzewa. Księżyc pozostaje widoczny. Jeśli wzniesienie ukrywa koronę drzewa lub inny zamierzony punkt uwagi, obniż je lub przesuń obiekt przed eksportem.

Złożenie na ekranie pomaga sprawdzić relacje widocznych kształtów. Grubość przekładek, kąt oglądania, oświetlenie i dostępna głębokość ramy wymagają fizycznej makiety.

## Sprawdź połączenia materiału w zapisanym SVG

Pojedynczy element ścieżki może zawierać kilka niepołączonych kształtów. **Liczenie ścieżek nie jest testem połączeń.** Ścieżka złożona zawiera wiele konturów w jednym obiekcie ścieżki; jej reguła wypełnienia określa, które zamknięte obszary są wypełniane. Specyfikacja SVG definiuje te reguły, w tym używaną w naszych plikach `evenodd`. [Wypełnianie i reguły wypełnienia SVG W3C](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty)

Utworzyliśmy przykładowe panele przez sumowanie obszarów dodatnich, wyeksportowaliśmy zamknięte kontury i odtworzyliśmy wypełnione obszary z zapisanych danych SVG. Sprawdziło to rzeczywiście wyeksportowaną geometrię, a nie stos nakładających się kolorowych kształtów.

| Zapisany plik              | Połączone obszary dodatnie | Co potwierdza kontrola                          |
| -------------------------- | -------------------------- | ----------------------------------------------- |
| Tył: góry, księżyc, mostek | 1                          | Księżyc łączy się z ramką przez mostek          |
| Środek: drzewo i grunt     | 1                          | Korona, pień, grunt i ramka tworzą jeden obszar |
| Przód: niskie wzniesienie  | 1                          | Wzniesienie łączy się z ramką                   |
| Tył po usunięciu mostka    | 2                          | Księżyc jest oddzielną dodatnią wyspą           |

Wszystkie cztery pliki zawierają jeden element ścieżki. Każdy połączony panel ma dwa zamknięte kontury: granicę zewnętrzną i granicę otworu. Wersja z luźnym księżycem ma trzeci kontur oddzielnego księżyca. Dlatego sama nazwa warstwy, grupa czy liczba ścieżek nie mówi, czy zamierzony arkusz pozostaje połączony.

Dla własnego eksportu:

1. Otwórz ponownie zapisany SVG i obejrzyj każdy panel osobno ze zwykłym wypełnieniem.
2. Prześledź ciągłą trasę po zachowanym materiale od każdego detalu do ramki. Przybliż miejsca, gdzie kształty prawie się stykają; kontakt punktowy nie daje mierzalnego paska papieru.
3. Sprawdź kontury wokół połączonych obiektów. Scal szwy nakładania, które podzieliłyby materiał przeznaczony do zachowania.
4. Sprawdź otwory jako geometrię. Biały kształt namalowany na innym może wyglądać jak otwór bez usuwania leżącego pod nim konturu.
5. Złóż płaski podgląd z zapisanych warstw, korzystając ze wspólnego początku i wymiarów.

Jeśli detal pozostaje odizolowany, dodaj i zsumuj mostek, przesuń detal na połączony materiał, zmień go w wycięcie lub zaplanuj jako oddzielnie mocowany element. Jasno zapisz ten wybór w planie montażu.

## Gdzie przydaje się PerfectVector, gdy motyw jest rastrem

PerfectVector może odzyskać edytowalne ścieżki SVG z odpowiedniej grafiki PNG lub JPG. [Proces SVG do Cricut](https://perfectvector.com/svg-for-cricut) pozwala przeglądać kształty i poprawiać ich kolory przed przygotowaniem pliku docelowego. Użyj go dla motywu rastrowego do ponownego wykorzystania; budowa ramki, mostki i kolejność głębi pozostają oddzielną pracą projektową.

Zacznij od wyrazistej sylwetki lub prostej płaskiej ilustracji. Sprawdź odzyskany kontur pod kątem przypadkowych fragmentów i brakujących otworów przed umieszczeniem w panelu. [Poradnik line art do SVG](https://perfectvector.com/pl/blog/line-art-to-svg) wyjaśnia różnicę między trasowaniem konturowym a pierwotnie narysowaną linią.

Szczegółowa fotografia wymaga decyzji, które obiekty znajdują się na jakiej głębokości i które kształty stają się papierem. Uprość lub przerysuj te formy przed planowaniem paneli. Automatyczny podział kolorów nie dostarcza planu montażu.

## Sprawdź plik docelowy, a potem materiał

Kontrola projektu SVG jest ukończona, gdy granice zewnętrzne są zgodne, zachowywane obszary są połączone, szwy nakładania usunięte, a zapisane złożenie odsłania właściwe detale. Zachowaj numerowaną listę warstw z plikiem głównym, aby kolejność montażu była jasna.

Przed wykonaniem gotowego projektu sprawdź w rzeczywistej aplikacji tnącej i ramie:

* Wymiary zaimportowanych paneli odpowiadają zamierzonemu rozmiarowi.
* Podgląd zachowuje otwory i nie ma niechcianych cięć wewnętrznych.
* Każdy panel ma właściwą operację cięcia i przypisany materiał.
* Mała próbka najdłuższego mostka wytrzymuje cięcie, zdejmowanie z maty i przenoszenie.
* Wybrane przekładki mieszczą się na zachowanym materiale i nie są widoczne przez otwory.
* Zmontowany stos mieści się w ramie z założonym podkładem.

Jeśli import zmienia otwór lub kontur, wróć do zapisanej geometrii i napraw ten konkretny kontur. Jeśli mostek rwie się lub wygina, zmień szerokość, długość, mocowanie lub materiał i przetestuj ponownie. Sam render przeglądarkowy nie rozstrzyga tych pytań fizycznych. [Ogólny poradnik przygotowania SVG do Cricut](https://perfectvector.com/pl/blog/svg-files-for-cricut) opisuje szersze kontrole plików.

## FAQ

### Czy mogę automatycznie zamienić obraz w SVG do shadow box?

Wektoryzacja może odzyskać kształty z obrazu, ale nadal musisz wybrać warstwy głębi, połączenia z ramką, wycięcia i kolejność montażu. Prosta sylwetka jest dobrym początkiem. Złożona fotografia może wymagać ręcznego uproszczenia lub przerysowania.

### Czy każdy panel shadow box musi być jedną ścieżką SVG?

Jedna ścieżka może zawierać niepołączone dodatnie wyspy. Sprawdź zachowane obszary i rzeczywiste kontury zamiast polegać na liczbie ścieżek. W naszym przykładzie połączony tylny panel i kontrprzykład z luźnym księżycem zawierają po jednym elemencie ścieżki.

### Jak szerokie powinny być mostki?

Dobierz je i przetestuj dla materiału, rozpiętości, końcowego rozmiaru i procesu cięcia. Pokazany mostek księżyca ma 4 mm, ale nie wycinaliśmy go ani nie badaliśmy wytrzymałości. To przykładowy wymiar, a nie uniwersalne minimum.

### Czy warstwa shadow box jest tym samym co warstwa koloru Cricut?

Warstwa shadow box jest panelem w układzie głębi. Warstwa koloru oddziela grafikę według koloru lub materiału. Panel głębi może zawierać kilka motywów połączonych z jedną ramką; sam podział kolorów nie projektuje ich połączeń.

## Źródła

1. [Inkscape — operacje logiczne](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — opisuje Union, Difference, Combine i rolę kolejności stosu.
2. [W3C — układy współrzędnych, transformacje i jednostki SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — definiuje prostokąt współrzędnych mapowany przez `viewBox`.
3. [W3C — malowanie SVG](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — definiuje wypełnienia, podścieżki i regułę `evenodd` używaną w przykładzie.
4. [PerfectVector — SVG do Cricut](https://perfectvector.com/svg-for-cricut) — opisuje odzyskiwanie grafiki rastrowej, przegląd kształtów i kontrole przed cięciem.

***

Jeśli motyw zaczyna jako PNG lub JPG, [przygotuj ścieżki SVG za pomocą PerfectVector](https://perfectvector.com/pl/svg-for-cricut), a potem sprawdź kontur i otwory. Zbuduj połączenia ramki i warstwy głębi w edytorze, otwórz ponownie zapisane panele i przetestuj małą próbkę materiału przed wykonaniem gotowego shadow box.

## Explore

- [Read the HTML article](https://perfectvector.com/pl/blog/shadow-box-svg-connected-layers)
- [Knockout w Cricut: zaplanuj bazę i warstwę imienia](https://perfectvector.com/pl/blog/cricut-knockout-real-cutouts.md)
- [SVG do Cricut trudno obierać? Popraw sam plik](https://perfectvector.com/pl/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)