> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG para shadow box: diseña capas de papel conectadas > Diseña un SVG de shadow box con marcos alineados, formas de papel conectadas y un orden de apilado comprobado. Observa cómo una luna suelta cambia la geometría guardada. Source: https://perfectvector.com/es/blog/shadow-box-svg-connected-layers Language: es Author: Irene Kim Published: 2026-10-08T08:00:00+09:00 Updated: 2026-10-08T08:00:00+09:00 Para crear un SVG por capas para una shadow box, diseña cada capa de profundidad como un panel conectado: un marco, el diseño que pertenece a esa profundidad y geometría de conexión suficiente para mantener unido el papel previsto. Da a todos los paneles las mismas dimensiones exteriores, une las formas de material superpuestas y comprueba después qué ocultan los paneles delanteros. Esta guía usa una escena de montaña de tres paneles para mostrar el diseño SVG y la preparación de archivos. Inspeccionamos los contornos guardados y los renderizamos en un navegador. No importamos estos archivos en Cricut Design Space ni cortamos papel, por lo que la resistencia de los puentes, los ajustes de material y el montaje físico aún necesitan pruebas. ## Decide qué pertenece a cada panel de papel Una **capa de profundidad** es un panel situado delante o detrás de otro. Su color puede ayudarte a identificarlo en pantalla, pero su función proviene de su posición y forma. Separar un PNG por colores no decide esas relaciones. Para vinilo o superposición plana de colores, usa la [guía independiente de SVG por capas para Cricut](https://perfectvector.com/es/blog/layered-svg-for-cricut). El **material positivo** es el papel que quieres conservar. Un **recorte** es una abertura que eliminas. Un **puente** es una tira de material positivo que conecta un detalle con el resto de su panel. Una **isla flotante** es material conservado sin conexión con ese panel. En el ejemplo siguiente, el panel trasero contiene las montañas y la luna. El intermedio lleva un árbol y el suelo. El delantero añade una elevación baja del terreno. Cada panel tiene un marco exterior y todos los detalles conservados se conectan con él. **Ejemplo de diseño SVG guardado** ![Renderizado en navegador de tres paneles SVG conectados de 200 mm, un contraejemplo con luna suelta y su apilado plano alineado](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp) *Cada uno de los tres paneles contiene una región positiva conectada. La versión con luna suelta contiene dos. El apilado plano muestra qué formas cubren a otras; no simula la resistencia del papel ni la profundidad física.* ## Construye tres capas con límites exteriores comunes Necesitas un editor vectorial con resta y unión de formas, un motivo sencillo y medidas de tu marco previsto. Conserva un maestro editable antes de unir las formas. Si ya tienes un diseño vectorial utilizable, empieza con él. Si tu motivo solo existe como PNG o JPG, recupera primero sus trazados y diseña después las conexiones del papel por separado. ### 1. Haz un marco y duplícalo Mide el espacio disponible para los paneles dentro de tu marco. Ten en cuenta el espacio que ocuparán el respaldo y los separadores previstos antes de elegir el tamaño final del proyecto. Nuestros archivos usan un cuadrado exterior de **200 × 200 mm** con una **banda de marco de 12 mm**. La abertura va de x = 12 a 188 mm y de y = 12 a 188 mm. Son dimensiones de ejemplo, no un ajuste recomendado para todos los marcos. Dibuja el cuadrado exterior y otro más pequeño centrado. Resta el pequeño para crear la abertura y duplica ese marco para los tres paneles. Inkscape documenta **Diferencia** como resta y **Unión** como la conservación del contorno común de los trazados seleccionados. El orden de apilado importa para Diferencia: la forma que restas se sitúa sobre la que conservas. [Operaciones booleanas de Inkscape](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) Usa el mismo origen de página y el mismo cuadrado exterior en todas las capas. No recortes cada exportación a su motivo individual. Todos los archivos de ejemplo declaran `width="200mm"`, `height="200mm"` y `viewBox="0 0 200 200"`; su geometría guardada tiene los mismos límites de 200 mm. El `viewBox` de SVG define el rectángulo de coordenadas asignado a su área de visualización. Confirma de nuevo las dimensiones físicas en la aplicación de destino. [Sistemas de coordenadas SVG del W3C](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) ### 2. Une la escena trasera a su marco Coloca una silueta de montaña de modo que su base se superponga a la banda inferior del marco. Añade la luna encima. Una luna aislada dentro de la abertura es una pieza de papel conservado separada, así que necesita una conexión deliberada si quieres que el panel trasero sea una sola pieza. En nuestro ejemplo, la luna está centrada en **x = 145, y = 46 mm**, con un radio nominal de **14 mm**. Un rectángulo vertical de **x = 143 a 147 mm** la conecta con el marco superior. Ese rectángulo se superpone tanto a la luna como al marco antes de la unión. Une el marco, las montañas, la luna y el puente. Inspecciona el contorno resultante. Los límites de superposición entre los objetos originales deben desaparecer; no deben quedar como contornos de corte internos adicionales. El puente de ejemplo tiene **4 mm de ancho**. Ese número describe el archivo que inspeccionamos. No establece un ancho mínimo para tu papel, longitud de puente, máquina o tamaño final. Haz una prueba pequeña con el material y la geometría que planeas usar. ### 3. Conecta el elemento central a través de su base Mantén conectados la copa, el tronco y el suelo del árbol. En este ejemplo, el tronco tiene **8 mm de ancho**, de x = 56 a 64 mm. Se superpone a la copa y al suelo, y el suelo se superpone a la banda inferior del marco. Une esas formas en el panel intermedio. Un ojo, una estrella o la contraforma de una letra pueden cambiar qué áreas quedan unidas. Revisa esos detalles como material positivo o recortes antes de simplificarlos. Si una abertura se rellena inesperadamente después de exportar, sigue el [diagnóstico de agujeros SVG y reglas de relleno](https://perfectvector.com/es/blog/svg-holes-fill-in). ### 4. Mantén el primer plano lo bastante bajo para mostrar el motivo Añade una elevación baja del terreno al tercer marco y únela a la banda inferior. Alinea los tres paneles, con las montañas detrás del árbol y la elevación delante. La **oclusión** significa que una forma oculta otra desde la dirección de observación. En nuestro apilado plano, el árbol cubre parte de las montañas y la elevación cubre la base del árbol. La luna sigue visible. Si la elevación oculta la copa del árbol u otro detalle focal previsto, bájala o mueve el elemento principal antes de exportar. Un apilado en pantalla ayuda a comprobar las relaciones entre formas visibles. El grosor de los separadores, el ángulo de visión, la iluminación y la profundidad disponible dentro del marco requieren una maqueta física. ## Inspecciona las conexiones del material en el SVG guardado Un solo elemento de trazado puede contener varias formas desconectadas. **Contar trazados no es una prueba de conectividad.** Un trazado compuesto contiene varios contornos en un objeto de trazado; su regla de relleno determina qué áreas cerradas se rellenan. La especificación SVG define estas reglas de relleno, incluida `evenodd`, usada en nuestros archivos. [Rellenos y reglas de relleno SVG del W3C](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) Creamos los paneles de ejemplo uniendo sus regiones positivas, exportamos contornos cerrados y reconstruimos las regiones rellenas a partir de los datos SVG guardados. Así comprobamos la geometría realmente exportada, no un conjunto de formas de color superpuestas. | Archivo guardado | Regiones positivas conectadas | Qué demuestra la inspección | | -------------------------------- | ----------------------------- | --------------------------------------------- | | Trasero: montañas, luna y puente | 1 | La luna se une al marco mediante el puente | | Intermedio: árbol y suelo | 1 | Copa, tronco, suelo y marco forman una región | | Delantero: elevación baja | 1 | La elevación se une al marco | | Trasero sin puente | 2 | La luna es una isla positiva separada | Los cuatro archivos contienen un solo elemento de trazado. Cada panel conectado tiene dos contornos cerrados: el límite exterior y el límite de la abertura. La versión con luna flotante tiene un tercer contorno para su luna separada. Por eso un nombre de capa, un grupo o el número de trazados por sí solos no permiten saber si la hoja prevista permanece conectada. Para tu propia exportación: 1. Vuelve a abrir el SVG guardado y observa cada panel por separado con un relleno simple. 2. Sigue un recorrido continuo por el material conservado desde cada detalle hasta el marco. Amplía donde las formas casi se toquen; un contacto puntual no proporciona una tira de papel medible. 3. Inspecciona los contornos alrededor de objetos unidos. Fusiona las uniones de superposición que dividirían el material que quieres conservar. 4. Comprueba las aberturas como geometría. Una forma blanca pintada sobre otra puede parecer un agujero sin eliminar el contorno que hay debajo. 5. Vuelve a montar una vista previa plana con las capas guardadas, usando su origen y dimensiones comunes. Si un detalle sigue aislado, añade y une un puente, mueve el detalle sobre material conectado, conviértelo en recorte o planéalo como una pieza que se fijará por separado. Deja esa elección explícita en el plan de montaje. ## Dónde encaja PerfectVector si el motivo es una imagen ráster PerfectVector puede recuperar trazados SVG editables de diseños PNG o JPG adecuados. Su [flujo de SVG para Cricut](https://perfectvector.com/svg-for-cricut) permite previsualizar las formas y ajustar sus colores antes de preparar el archivo de destino. Usa ese paso para un motivo ráster que quieras reutilizar; construir el marco, los puentes y el orden de profundidad sigue siendo un trabajo de diseño separado. Empieza con una silueta marcada o una ilustración plana sencilla. Inspecciona el contorno recuperado en busca de fragmentos sueltos y aberturas ausentes antes de colocarlo en un panel. La [guía de dibujo lineal a SVG](https://perfectvector.com/es/blog/line-art-to-svg) explica la diferencia entre un trazado con contorno y la línea que dibujaste originalmente. Una fotografía detallada requiere decidir qué objetos se sitúan a cada profundidad y qué formas se convierten en papel. Simplifica o vuelve a dibujar esas formas antes de planificar los paneles. La separación automática por colores no proporciona ese plan de montaje. ## Comprueba el archivo de destino y prueba después el material La comprobación del diseño SVG termina cuando coinciden los límites exteriores, se conectan las regiones que quieres conservar, se eliminan las uniones de superposición y el apilado guardado muestra los detalles correctos. Conserva una lista numerada de capas junto al maestro para dejar claro el orden de montaje. Antes de hacer el proyecto final, comprueba estos puntos en tu aplicación de corte y marco reales: * Las dimensiones de los paneles importados coinciden con el tamaño previsto. * La vista previa conserva las aberturas y no tiene cortes internos no deseados. * Cada panel tiene la operación de corte y la asignación de material previstas. * Una muestra pequeña del puente más largo resiste el corte, la retirada del tapete y la manipulación. * Los separadores elegidos caben sobre material conservado y no se ven a través de las aberturas. * El conjunto montado cabe en el marco con el respaldo colocado. Si una importación cambia una abertura o un contorno, vuelve a la geometría guardada y repara ese contorno concreto. Si un puente se rasga o dobla, revisa su ancho, longitud, unión o material y repite la prueba. El renderizado en navegador por sí solo no resuelve esas cuestiones físicas. La [guía general de preparación de SVG para Cricut](https://perfectvector.com/es/blog/svg-files-for-cricut) explica las comprobaciones más amplias del archivo. ## Preguntas frecuentes ### ¿Puedo convertir automáticamente una imagen en un SVG de shadow box? La vectorización puede recuperar formas de una imagen, pero aún debes elegir las capas de profundidad, las conexiones con el marco, los recortes y el orden de montaje. Una silueta sencilla es un punto de partida útil. Una foto compleja puede necesitar simplificación o redibujado manual. ### ¿Cada panel de shadow box debe ser un solo trazado SVG? Un trazado puede contener islas positivas desconectadas. Comprueba las regiones conservadas y los contornos reales en lugar de confiar en el número de trazados. En nuestro ejemplo, tanto el panel trasero conectado como el contraejemplo de luna suelta contienen un solo elemento de trazado. ### ¿Qué ancho deben tener los puentes? Elígelos y pruébalos según tu material, longitud, tamaño final y flujo de corte. El puente de la luna mostrado tiene 4 mm de ancho, pero no lo cortamos ni probamos su resistencia. Es una dimensión de ejemplo, no un mínimo universal. ### ¿Una capa de shadow box es lo mismo que una capa de color de Cricut? Una capa de shadow box es un panel de una disposición en profundidad. Una capa de color separa el diseño por color o material. Un panel de profundidad puede incluir varios motivos unidos a un marco; separar esos motivos solo por color no diseña sus conexiones. ## Fuentes 1. [Inkscape — Operaciones booleanas](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — documenta Unión, Diferencia, Combinar y la función del orden de apilado. 2. [W3C — Sistemas de coordenadas, transformaciones y unidades SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — define el rectángulo de coordenadas asignado mediante `viewBox`. 3. [W3C — Pintura SVG](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — define rellenos, subtrazados y la regla de relleno `evenodd` usada en el ejemplo. 4. [PerfectVector — SVG para Cricut](https://perfectvector.com/svg-for-cricut) — describe la recuperación de diseños ráster, la revisión de formas y las comprobaciones antes de cortar. *** Si tu motivo empieza como PNG o JPG, [prepara sus trazados SVG con PerfectVector](https://perfectvector.com/es/svg-for-cricut) e inspecciona después el contorno y las aberturas. Construye las conexiones del marco y las capas de profundidad en tu editor, vuelve a abrir los paneles guardados y prueba una muestra pequeña de material antes de hacer la shadow box terminada. ## Explore - [Read the HTML article](https://perfectvector.com/es/blog/shadow-box-svg-connected-layers) - [Diseños knockout en Cricut: base y nombre separados](https://perfectvector.com/es/blog/cricut-knockout-real-cutouts.md) - [Por qué tu SVG de Cricut es tan difícil de pelar (y la parte que puedes arreglar en el archivo)](https://perfectvector.com/es/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)