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

# SVG para shadow box: crie camadas de papel conectadas

> Crie um SVG de shadow box com molduras alinhadas, formas de papel conectadas e ordem de montagem conferida. Veja como uma lua solta muda a geometria salva.

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

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

Para criar um SVG em camadas para shadow box, projete cada camada de profundidade como um painel conectado: uma moldura, a arte que pertence àquela profundidade e geometria de conexão suficiente para manter o papel pretendido unido. Dê a todos os painéis as mesmas dimensões externas, una as formas de material sobrepostas e confira o que os painéis da frente escondem.

Este guia usa uma cena de montanhas com três painéis para demonstrar o design SVG e a preparação dos arquivos. Inspecionamos os contornos salvos e os renderizamos no navegador. Não importamos os arquivos no Cricut Design Space nem cortamos papel; a resistência das pontes, as configurações de material e a montagem física ainda precisam ser testadas.

## Decida o que pertence a cada painel de papel

Uma **camada de profundidade** é um painel colocado à frente ou atrás de outro. A cor ajuda a identificá-lo na tela, mas sua função vem da posição e da forma. Separar um PNG por cores não decide essas relações. Para vinil ou sobreposição plana de cores, use o [guia separado de SVG em camadas para Cricut](https://perfectvector.com/pt-BR/blog/layered-svg-for-cricut).

**Material positivo** é o papel que você pretende manter. Um **recorte** é uma abertura removida. Uma **ponte** é uma faixa de material positivo que conecta um detalhe ao restante do painel. Uma **ilha solta** é material mantido sem conexão com esse painel.

No exemplo abaixo, o painel de trás contém as montanhas e a lua. O intermediário carrega uma árvore e o chão. O frontal acrescenta um barranco baixo. Cada painel tem uma moldura externa, e todo detalhe mantido se conecta a ela.

**Exemplo de design SVG salvo**

![Renderização no navegador de três painéis SVG conectados de 200 mm, um contraexemplo com lua solta e sua pilha plana alinhada](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp)

*Cada um dos três painéis contém uma região positiva conectada. A versão com lua solta contém duas. A pilha plana mostra quais formas cobrem outras; não simula a resistência do papel nem a profundidade física.*

## Crie três camadas com os mesmos limites externos

Você precisa de um editor vetorial com subtração e união de formas, um motivo simples e medidas da moldura que pretende usar. Guarde um mestre editável antes de unir as formas. Se já tiver arte vetorial utilizável, comece com ela. Se o motivo existir apenas em PNG ou JPG, recupere os caminhos primeiro e projete as conexões de papel separadamente.

### 1. Faça uma moldura e duplique

Meça o espaço disponível para os painéis dentro da moldura. Considere o espaço ocupado pelo fundo e pelos espaçadores planejados antes de escolher o tamanho final do projeto.

Nossos arquivos usam um quadrado externo de **200 × 200 mm** com uma **faixa de moldura de 12 mm**. A abertura vai de x = 12 a 188 mm e de y = 12 a 188 mm. São dimensões de exemplo, não um encaixe recomendado para toda moldura.

Desenhe o quadrado externo e um quadrado menor centralizado. Subtraia o menor para criar a abertura e duplique a moldura para os três painéis. O Inkscape documenta **Difference** como subtração e **Union** como a preservação do contorno comum dos caminhos selecionados. A ordem de empilhamento importa em Difference: a forma subtraída fica acima da forma mantida. [Operações booleanas do Inkscape](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html)

Use a mesma origem de página e o mesmo quadrado externo em todas as camadas. Não apare cada exportação ao motivo individual. Todos os exemplos declaram `width="200mm"`, `height="200mm"` e `viewBox="0 0 200 200"`; a geometria salva tem os mesmos limites de 200 mm. O `viewBox` do SVG define o retângulo de coordenadas mapeado para sua área de visualização. Confirme as dimensões físicas novamente no aplicativo de destino. [Sistemas de coordenadas SVG do W3C](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute)

### 2. Una a cena de trás à moldura

Posicione uma silhueta de montanhas com a base sobrepondo a faixa inferior da moldura. Adicione a lua acima. Uma lua sozinha dentro da abertura é uma peça separada de papel mantido, portanto precisa de uma conexão deliberada se o painel de trás deve continuar inteiro.

No exemplo, a lua está centralizada em **x = 145, y = 46 mm**, com raio nominal de **14 mm**. Um retângulo vertical de **x = 143 a 147 mm** a conecta à moldura superior. Esse retângulo se sobrepõe à lua e à moldura antes da união.

Una moldura, montanhas, lua e ponte. Inspecione o contorno resultante. Os limites de sobreposição entre os objetos originais devem desaparecer; não devem permanecer como contornos extras de corte interno.

A ponte do exemplo tem **4 mm de largura**. Esse número descreve o arquivo que inspecionamos. Não estabelece uma largura mínima para seu papel, vão, máquina ou tamanho final. Faça um pequeno teste com o material e a geometria que pretende usar.

### 3. Conecte o tema intermediário pela base

Mantenha copa, tronco e chão conectados. Neste exemplo, o tronco tem **8 mm de largura**, de x = 56 a 64 mm. Ele se sobrepõe à copa e ao chão, e o chão se sobrepõe à faixa inferior da moldura. Una essas formas no painel intermediário.

Um olho, estrela ou contraforma de letra pode mudar quais áreas continuam presas. Revise esses detalhes como material positivo ou recorte antes de simplificá-los. Se uma abertura se preencher inesperadamente após a exportação, siga o [diagnóstico de furos e fill-rule do SVG](https://perfectvector.com/pt-BR/blog/svg-holes-fill-in).

### 4. Mantenha a frente baixa o bastante para revelar o tema

Adicione um barranco baixo à terceira moldura e una à faixa inferior. Alinhe os três painéis, com as montanhas atrás da árvore e o barranco na frente.

**Oclusão** é quando uma forma esconde outra na direção de visualização. Na pilha plana, a árvore cobre parte das montanhas e o barranco cobre a base da árvore. A lua continua visível. Se o barranco esconder a copa ou outro foco pretendido, abaixe o barranco ou mova o tema antes de exportar.

Uma pilha na tela ajuda a conferir as relações entre formas visíveis. Espessura dos espaçadores, ângulo de visão, iluminação e profundidade disponível na moldura exigem um modelo físico.

## Inspecione as conexões do material no SVG salvo

Um único elemento de caminho pode conter várias formas desconectadas. **Contar caminhos não testa a conectividade.** Um caminho composto contém múltiplos contornos em um objeto de caminho; sua regra de preenchimento determina quais áreas fechadas são preenchidas. A especificação SVG define essas regras, incluindo `evenodd`, usada nos nossos arquivos. [Preenchimento e regras de preenchimento SVG do W3C](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty)

Criamos os painéis de exemplo unindo suas regiões positivas, exportamos contornos fechados e reconstruímos as regiões preenchidas a partir dos dados SVG salvos. Assim verificamos a geometria realmente exportada, em vez de uma pilha de formas coloridas sobrepostas.

| Arquivo salvo               | Regiões positivas conectadas | O que a inspeção comprova                      |
| --------------------------- | ---------------------------- | ---------------------------------------------- |
| Trás: montanhas, lua, ponte | 1                            | A lua se conecta à moldura pela ponte          |
| Meio: árvore e chão         | 1                            | Copa, tronco, chão e moldura formam uma região |
| Frente: barranco baixo      | 1                            | O barranco se conecta à moldura                |
| Trás com a ponte removida   | 2                            | A lua é uma ilha positiva separada             |

Os quatro arquivos contêm um elemento de caminho. Os painéis conectados têm dois contornos fechados cada: o limite externo e o limite da abertura. A versão com lua solta tem um terceiro contorno para a lua separada. Por isso, só o nome de camada, grupo ou quantidade de caminhos não diz se a folha pretendida continua conectada.

Na sua exportação:

1. Reabra o SVG salvo e veja cada painel sozinho com preenchimento simples.
2. Siga um percurso contínuo pelo material mantido de cada detalhe até a moldura. Amplie onde formas quase se encontram; um contato pontual não fornece uma faixa mensurável de papel.
3. Inspecione os contornos ao redor dos objetos unidos. Una as emendas de sobreposição que dividiriam material que você quer manter.
4. Confira as aberturas como geometria. Uma forma branca pintada sobre outra pode parecer um furo sem remover o contorno abaixo.
5. Recrie uma prévia plana com as camadas salvas, usando a origem e as dimensões comuns.

Se um detalhe continuar isolado, adicione e una uma ponte, mova-o para material conectado, transforme-o em recorte ou planeje uma peça fixada separadamente. Deixe essa escolha explícita no plano de montagem.

## Onde o PerfectVector entra quando o motivo é raster

O PerfectVector recupera caminhos SVG editáveis de artes PNG ou JPG adequadas. Seu [fluxo SVG para Cricut](https://perfectvector.com/svg-for-cricut) permite visualizar as formas e refinar suas cores antes de preparar o arquivo de destino. Use essa etapa para reutilizar um motivo raster; construir moldura e pontes e ordenar a profundidade continuam sendo trabalhos de design separados.

Comece com uma silhueta marcante ou ilustração plana simples. Inspecione o contorno recuperado procurando fragmentos soltos e aberturas ausentes antes de colocar no painel. O [guia de line art para SVG](https://perfectvector.com/pt-BR/blog/line-art-to-svg) explica a diferença entre uma vetorização contornada e a linha desenhada originalmente.

Uma fotografia detalhada exige decisões sobre quais objetos ficam em cada profundidade e quais formas se tornam papel. Simplifique ou redesenhe essas formas antes de planejar os painéis. A separação automática por cores não fornece esse plano de montagem.

## Confira o arquivo de destino e teste o material

A verificação do design SVG termina quando os limites externos correspondem, as regiões mantidas pretendidas se conectam, as emendas sobrepostas foram removidas e a pilha salva revela os detalhes certos. Guarde uma lista numerada de camadas com o mestre para deixar clara a ordem de montagem.

Antes de produzir o projeto final, confira no aplicativo real de corte e na moldura:

* As dimensões importadas dos painéis correspondem ao tamanho pretendido.
* A prévia mantém as aberturas e não tem cortes internos indesejados.
* Cada painel tem a operação de corte e o material pretendidos.
* Uma pequena amostra da ponte mais longa resiste ao corte, à remoção da base e ao manuseio.
* Os espaçadores escolhidos cabem no material mantido e não aparecem pelas aberturas.
* A pilha montada cabe na moldura com o fundo instalado.

Se uma importação mudar uma abertura ou contorno, volte à geometria salva e corrija aquele contorno específico. Se a ponte rasgar ou dobrar, revise largura, comprimento, conexão ou material e teste novamente. A renderização no navegador não resolve essas questões físicas. O [guia geral de preparação de SVG para Cricut](https://perfectvector.com/pt-BR/blog/svg-files-for-cricut) aborda as verificações mais amplas de arquivo.

## Perguntas frequentes

### Posso transformar uma imagem em SVG para shadow box automaticamente?

A vetorização recupera formas de uma imagem, mas você ainda precisa escolher camadas de profundidade, conexões com a moldura, recortes e ordem de montagem. Uma silhueta simples é um bom ponto de partida. Uma foto complexa pode exigir simplificação ou redesenho manual.

### Cada painel de shadow box precisa ser um caminho SVG?

Um caminho pode conter ilhas positivas desconectadas. Confira as regiões mantidas e os contornos reais em vez de depender da quantidade de caminhos. No exemplo, tanto o painel traseiro conectado quanto o contraexemplo com lua solta contêm um elemento de caminho.

### Qual deve ser a largura das pontes?

Escolha e teste para seu material, vão, tamanho final e fluxo de corte. A ponte da lua demonstrada tem 4 mm, mas não a cortamos nem testamos sua resistência. É uma dimensão de exemplo, não um mínimo universal.

### Uma camada de shadow box é igual a uma camada de cor do Cricut?

Uma camada de shadow box é um painel em um arranjo de profundidade. Uma camada de cor separa a arte por cor ou material. Um painel de profundidade pode incluir vários motivos unidos a uma moldura; separar esses motivos apenas por cor não projeta suas conexões.

## Fontes

1. [Inkscape — Operações booleanas](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — Documenta Union, Difference, Combine e a função da ordem de empilhamento.
2. [W3C — Sistemas de coordenadas, transformações e unidades SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Define o retângulo de coordenadas mapeado por `viewBox`.
3. [W3C — Pintura SVG](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — Define preenchimentos, subcaminhos e a regra `evenodd` usada no exemplo.
4. [PerfectVector — SVG para Cricut](https://perfectvector.com/svg-for-cricut) — Descreve a recuperação de arte raster, a revisão de formas e as verificações antes de cortar.

***

Se o motivo começa como PNG ou JPG, [prepare os caminhos SVG com PerfectVector](https://perfectvector.com/pt-BR/svg-for-cricut) e inspecione o contorno e as aberturas. Crie as conexões da moldura e as camadas de profundidade no editor, reabra os painéis salvos e teste uma pequena amostra do material antes de produzir a shadow box final.

## Explore

- [Read the HTML article](https://perfectvector.com/pt-BR/blog/shadow-box-svg-connected-layers)
- [Knockout no Cricut: planeje a base e a camada do nome](https://perfectvector.com/pt-BR/blog/cricut-knockout-real-cutouts.md)
- [Por que seu SVG do Cricut é tão difícil de remover o excesso (e a parte que dá para corrigir no arquivo)](https://perfectvector.com/pt-BR/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)