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

# SVG для шэдоубокса: связные бумажные слои

> Создайте многослойный SVG для шэдоубокса с совмещёнными рамками, связанными бумажными фигурами и проверенным порядком. Посмотрите, как отдельная луна меняет геометрию.

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

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

Чтобы создать многослойный SVG для шэдоубокса, проектируйте каждый слой глубины как связную панель: рамку, рисунок на этой глубине и достаточную соединительную геометрию, удерживающую нужные части бумаги вместе. Задайте всем панелям одинаковые внешние размеры, объедините пересекающиеся фигуры материала, затем проверьте, что скрывают передние панели.

В руководстве используется горный пейзаж из трёх панелей для демонстрации дизайна SVG и подготовки файлов. Мы изучили сохранённые контуры и отрисовали их в браузере. Мы не импортировали файлы в Cricut Design Space и не резали бумагу, поэтому прочность перемычек, настройки материала и физическую сборку ещё нужно проверить.

## Решите, что относится к каждой бумажной панели

**Слой глубины** — панель, расположенная перед другой или позади неё. Цвет помогает различать её на экране, но назначение панели определяется положением и формой. Разделение PNG по цветам не задаёт эти связи. Для винила или плоского наложения цветов используйте отдельное [руководство по многослойному SVG для Cricut](https://perfectvector.com/ru/blog/layered-svg-for-cricut).

**Позитивный материал** — бумага, которую нужно сохранить. **Вырез** — удаляемое отверстие. **Перемычка** — полоска сохраняемого материала, соединяющая деталь с остальной панелью. **Отдельный островок** — сохраняемый материал, не связанный с этой панелью.

В примере ниже задняя панель содержит горы и луну. Средняя — дерево и землю. Передняя добавляет невысокий пригорок. У каждой панели есть внешняя рамка, и каждая сохраняемая деталь связана с ней.

**Пример сохранённого SVG-дизайна**

![Отрисовка в браузере трёх связных панелей SVG размером 200 мм, контрпримера с отдельной луной и их совмещённой плоской сборки](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp)

*Каждая из трёх панелей содержит одну связную область материала. Версия с отдельной луной содержит две. Плоская сборка показывает перекрытие фигур, но не моделирует прочность бумаги или физическую глубину.*

## Постройте три слоя с общими внешними границами

Нужны векторный редактор с вычитанием и объединением фигур, простой мотив и размеры будущей рамки. Сохраните редактируемый оригинал до объединения фигур. Если пригодный векторный рисунок уже есть, начните с него. Если мотив существует только в PNG или JPG, сначала восстановите контуры, а бумажные соединения спроектируйте отдельно.

### 1. Создайте одну рамку и продублируйте её

Измерьте место для панелей внутри рамки. До выбора итогового размера учтите пространство для задника и запланированных проставок.

Наши файлы используют внешний квадрат **200 × 200 мм** с **полосой рамки 12 мм**. Отверстие простирается от x = 12 до 188 мм и от y = 12 до 188 мм. Это пример размеров, а не рекомендованная посадка для любой рамки.

Нарисуйте внешний квадрат и меньший квадрат по центру. Вычтите меньший для создания отверстия, затем продублируйте рамку для трёх панелей. Inkscape описывает **Difference** как вычитание, а **Union** — как сохранение общего очертания выбранных контуров. Для Difference важен порядок: вычитаемая фигура находится над сохраняемой. [Булевы операции Inkscape](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html)

Используйте одинаковые начало координат страницы и внешний квадрат на всех слоях. Не обрезайте каждый экспорт по отдельному мотиву. Все файлы примера объявляют `width="200mm"`, `height="200mm"` и `viewBox="0 0 200 200"`; сохранённая геометрия имеет одинаковые границы 200 мм. `viewBox` SVG задаёт прямоугольник координат, отображаемый в области просмотра. Повторно подтвердите физические размеры в целевой программе. [Системы координат SVG W3C](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute)

### 2. Соедините заднюю сцену с рамкой

Расположите силуэт гор так, чтобы его основание перекрывало нижнюю полосу рамки. Добавьте над ним луну. Луна, стоящая отдельно внутри отверстия, — отдельный кусочек сохраняемой бумаги, поэтому ей нужно намеренное соединение, если задняя панель должна оставаться цельной.

В нашем примере центр луны находится в **x = 145, y = 46 мм**, номинальный радиус — **14 мм**. Вертикальный прямоугольник от **x = 143 до 147 мм** соединяет её с верхней рамкой. Перед объединением он перекрывает и луну, и рамку.

Объедините рамку, горы, луну и перемычку через Union. Осмотрите полученное очертание. Границы пересечений исходных объектов должны исчезнуть, а не остаться лишними внутренними контурами резки.

Перемычка примера имеет **ширину 4 мм**. Это число описывает проверенный файл. Оно не устанавливает минимальную ширину для вашей бумаги, пролёта, машины или размера изделия. Сделайте небольшой тест с предполагаемыми материалом и геометрией.

### 3. Соедините средний объект через его основание

Сохраните связь кроны, ствола и земли. В примере ствол имеет **ширину 8 мм**, от x = 56 до 64 мм. Он перекрывает крону и землю, а земля — нижнюю полосу рамки. Объедините эти фигуры в среднюю панель.

Глаз, звезда или просвет буквы могут изменить то, какие области остаются связанными. До упрощения рассмотрите эти детали как сохраняемый материал или вырезы. Если после экспорта отверстие неожиданно залилось, выполните [диагностику отверстий SVG и fill-rule](https://perfectvector.com/ru/blog/svg-holes-fill-in).

### 4. Сделайте передний план достаточно низким, чтобы объект был виден

Добавьте невысокий пригорок к третьей рамке и объедините его с нижней полосой. Совместите три панели: горы позади дерева, пригорок перед ним.

**Перекрытие** означает, что одна фигура скрывает другую с направления просмотра. В нашей плоской сборке дерево закрывает часть гор, а пригорок — основание дерева. Луна остаётся видна. Если пригорок скрывает крону или другую важную деталь, опустите его либо переместите объект до экспорта.

Экранная сборка помогает проверить видимые связи фигур. Толщина проставок, угол просмотра, освещение и доступная глубина внутри рамки требуют физического макета.

## Проверьте связи материала в сохранённом SVG

Один элемент path может содержать несколько несвязанных фигур. **Подсчёт контуров не проверяет связность.** Составной контур содержит несколько очертаний в одном объекте; правило заливки определяет, какие замкнутые области заполняются. Спецификация SVG задаёт эти правила, в том числе `evenodd`, использованное в наших файлах. [Заливка и правила заполнения SVG W3C](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty)

Мы создали панели, объединив сохраняемые области, экспортировали замкнутые очертания и восстановили залитые области из сохранённых данных SVG. Так проверялась реальная экспортированная геометрия, а не стопка пересекающихся цветных фигур.

| Сохранённый файл              | Связные области материала | Что устанавливает проверка                        |
| ----------------------------- | ------------------------- | ------------------------------------------------- |
| Задний: горы, луна, перемычка | 1                         | Луна связана с рамкой перемычкой                  |
| Средний: дерево и земля       | 1                         | Крона, ствол, земля и рамка образуют одну область |
| Передний: невысокий пригорок  | 1                         | Пригорок связан с рамкой                          |
| Задний без перемычки          | 2                         | Луна — отдельный островок материала               |

Все четыре файла содержат один элемент path. У связных панелей по два замкнутых очертания: внешняя граница и граница отверстия. Вариант с отдельной луной имеет третье очертание для самой луны. Поэтому имя слоя, группа или число элементов path сами по себе не показывают, останется ли задуманный лист связным.

Для своего экспорта:

1. Заново откройте сохранённый SVG и посмотрите каждую панель отдельно с простой заливкой.
2. Проследите непрерывный путь по сохраняемому материалу от каждой детали до рамки. Увеличьте места, где фигуры почти соприкасаются: точечный контакт не даёт полоски бумаги измеримой ширины.
3. Осмотрите очертания вокруг соединённых объектов. Объедините швы пересечений, которые разделили бы нужный материал.
4. Проверьте отверстия как геометрию. Белая фигура поверх другой может выглядеть отверстием, не удаляя лежащего ниже контура.
5. Заново соберите плоский предпросмотр из сохранённых слоёв с общими началом координат и размерами.

Если деталь изолирована, добавьте и объедините перемычку, переместите её на связанный материал, сделайте вырезом или запланируйте отдельное прикрепление. Явно укажите это решение в плане сборки.

## Где пригодится PerfectVector для растрового мотива

PerfectVector восстанавливает редактируемые контуры SVG из подходящих PNG или JPG. [Процесс SVG для Cricut](https://perfectvector.com/svg-for-cricut) позволяет просматривать фигуры и уточнять их цвета до подготовки целевого файла. Используйте этот шаг для повторного использования растрового мотива; рамка, перемычки и порядок глубины остаются отдельной дизайнерской работой.

Начните с выразительного силуэта или простой плоской иллюстрации. До размещения в панели проверьте восстановленное очертание на случайные фрагменты и пропущенные отверстия. [Руководство по превращению линейного рисунка в SVG](https://perfectvector.com/ru/blog/line-art-to-svg) объясняет разницу между трассированным очертанием и исходной нарисованной линией.

Для подробной фотографии нужно решить, какие объекты находятся на какой глубине и какие фигуры станут бумагой. Упростите или перерисуйте их до планирования панелей. Автоматическое разделение цветов не даёт такого плана сборки.

## Проверьте целевой файл, затем испытайте материал

Проверка дизайна SVG завершена, когда внешние границы совпадают, сохраняемые области связаны, швы пересечений удалены, а сохранённая сборка показывает нужные детали. Держите нумерованный список слоёв с оригиналом, чтобы порядок сборки был понятен.

До изготовления готового проекта проверьте в своей режущей программе и рамке:

* Размеры импортированных панелей совпадают с задуманными.
* Предпросмотр сохраняет отверстия и не содержит ненужных внутренних резов.
* Каждой панели назначены нужные операция резки и материал.
* Небольшой образец самой длинной перемычки выдерживает резку, снятие с коврика и обращение с ним.
* Выбранные проставки помещаются на сохраняемом материале и не видны через отверстия.
* Собранная стопка помещается в рамку с установленным задником.

Если импорт меняет отверстие или очертание, вернитесь к сохранённой геометрии и исправьте конкретный контур. Если перемычка рвётся или гнётся, измените ширину, длину, крепление или материал и испытайте снова. Одна отрисовка в браузере не решает эти физические вопросы. [Общее руководство по подготовке SVG для Cricut](https://perfectvector.com/ru/blog/svg-files-for-cricut) рассматривает более широкие проверки файлов.

## Частые вопросы

### Можно ли автоматически превратить картинку в SVG для шэдоубокса?

Векторизация восстанавливает фигуры из картинки, но слои глубины, соединения с рамкой, вырезы и порядок сборки всё равно выбираете вы. Простой силуэт — полезная отправная точка. Сложной фотографии может потребоваться ручное упрощение или перерисовка.

### Должна ли каждая панель шэдоубокса быть одним контуром SVG?

Один контур может содержать несвязанные островки материала. Проверяйте сохраняемые области и фактические очертания, а не число элементов. В нашем примере и связная задняя панель, и контрпример с отдельной луной содержат один элемент path.

### Какой ширины должны быть перемычки?

Подбирайте и испытывайте их под материал, пролёт, итоговый размер и процесс резки. Показанная перемычка луны имеет ширину 4 мм, но мы не вырезали её и не проверяли прочность. Это пример размера, а не универсальный минимум.

### Слой шэдоубокса — то же самое, что цветной слой Cricut?

Слой шэдоубокса — панель в пространственной композиции. Цветной слой разделяет изображение по цвету или материалу. Панель глубины может содержать несколько мотивов, соединённых с одной рамкой; простое разделение этих мотивов по цвету не проектирует их связи.

## Источники

1. [Inkscape — Булевы операции](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — Описывает Union, Difference, Combine и роль порядка наложения.
2. [W3C — Системы координат, преобразования и единицы SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Определяет прямоугольник координат, отображаемый через `viewBox`.
3. [W3C — Окрашивание SVG](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — Определяет заливки, подконтуры и правило `evenodd`, использованное в примере.
4. [PerfectVector — SVG для Cricut](https://perfectvector.com/svg-for-cricut) — Описывает восстановление растрового рисунка, просмотр фигур и проверки до резки.

***

Если мотив начинается с PNG или JPG, [подготовьте его контуры SVG в PerfectVector](https://perfectvector.com/ru/svg-for-cricut), затем осмотрите очертания и отверстия. Постройте связи с рамкой и слои глубины в редакторе, заново откройте сохранённые панели и испытайте небольшой образец материала до изготовления готового шэдоубокса.

## Explore

- [Read the HTML article](https://perfectvector.com/ru/blog/shadow-box-svg-connected-layers)
- [Knockout для Cricut: основа и отдельный слой имени](https://perfectvector.com/ru/blog/cricut-knockout-real-cutouts.md)
- [Почему SVG для Cricut так трудно очищать от лишнего материала (и что можно исправить прямо в файле)](https://perfectvector.com/ru/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)