Por qué se rellenan los huecos SVG y cómo restaurarlos

Un hueco SVG se rellena cuando el archivo o el destino deja de tratar el contorno interior como exterior de la forma rellena. Las causas habituales son un trazado compuesto liberado, un contorno interior guardado como objeto relleno independiente, una regla de relleno o dirección de trazado modificadas, un importador que pierde la relación o una vectorización de la imagen ráster que cerró la abertura antes de crear el SVG.

Empieza abriendo el SVG en un navegador. Si el hueco ya está relleno ahí, repara el archivo. Si el navegador lo muestra bien, pero otra aplicación rellena el hueco, el paso de importación es el fallo probable.

Localiza primero dónde desapareció el hueco

Utiliza dos renderizadores antes de cambiar la geometría:

1. Guarda una copia del SVG.
2. Abre directamente la copia en Chrome, Safari, Firefox u otro navegador.
3. Colócala sobre un fondo claro y otro oscuro.
4. Abre el mismo archivo en la aplicación de destino.
5. Compara el hueco exacto, no solo la silueta general.

Esta comparación distingue un SVG incorrecto de un problema de importación específico del destino. También evita que operaciones aleatorias de trazados dañen un archivo correcto antes de importar.

Una forma blanca no es un hueco

Un hueco real muestra lo que haya detrás del SVG. Una forma blanca solo parece vacía sobre un lienzo blanco. Para gráficos utilizados en una interfaz web, la guía de pointer-events de SVG muestra cómo responden a los clics un hueco, una región pintada y un objetivo de interacción separado.

Para probarlo, añade un rectángulo oscuro temporal detrás del gráfico. Si el supuesto hueco sigue blanco, selecciona ese objeto interior. Puedes conservarlo como elemento blanco deliberado, pero no esperes que una cortadora, herramienta de grabado, superposición de navegador o importador 3D lo interprete como espacio vacío.

Para una abertura transparente, utiliza un trazado compuesto o resta la forma interior de la exterior. Una máscara también puede crear transparencia, pero muchas aplicaciones de producción manejan geometría de trazados sencilla de forma más fiable que máscaras. Para un flujo programado, prueba recortar y unir trazados importados con Paper.js y después vuelve a abrir el SVG exportado para comprobar la abertura.

Para gráficos de gobos, una abertura transparente correcta todavía deja una decisión independiente de material. La comparación de gobos de acero y vidrio sigue la misma letra O por un diseño de puentes de acero y otro sostenido por vidrio, y explica por qué invertir las regiones proyectadas claras y oscuras cambia lo que debe permanecer unido.

Los trazados compuestos mantienen la relación del hueco

Una letra O, un anillo y un logotipo con centro recortado suelen utilizar un elemento path con múltiples subtrazados cerrados. El contorno exterior define la silueta; un subtrazado encerrado define el espacio interior o recorte. El modelo de trazados SVG permite múltiples subtrazados dentro de un trazado.

Por eso Ungroup, Break Apart y Release Compound Path no son intercambiables. Liberar el trazado compuesto puede convertir el contorno interior en un objeto relleno ordinario. La geometría sigue presente, pero ha desaparecido su relación con el contorno exterior.

Restáurala en una copia:

1. Selecciona el límite exterior y solo los contornos que deban ser huecos.
2. Utiliza Make Compound Path, Combine o el comando equivalente.
3. Aplica un relleno al objeto resultante.
4. Comprueba la regla de relleno.
5. Vuelve a abrir el SVG guardado en un navegador y en la aplicación de destino.

La documentación actual de trazados compuestos de Adobe utiliza este mismo modelo: los trazados componentes determinan regiones rellenas y transparentes mediante una regla de relleno.

Restaura la relación, no solo el aspecto

Para gráficos de sellos, comprueba la geometría elevada frente a hundida de sellos para cerámica antes de decidir qué áreas deben seguir rellenas.

Comprueba nonzero frente a evenodd

SVG tiene dos reglas de relleno. La especificación de pintado de SVG 2 establece nonzero como valor inicial y define evenodd como la otra opción.

• nonzero utiliza cruces de trazados con signo. Un contorno interior con la dirección equivocada puede añadir relleno en lugar de cancelarlo.
• evenodd cuenta cruces. Un punto encerrado dos veces queda fuera, así que un contorno anidado sencillo se convierte en hueco independientemente de la dirección.

Este trazado mínimo contiene dos rectángulos con la misma dirección. Con evenodd, el centro permanece transparente:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Cambiar la regla es útil cuando corresponde al diseño, pero no es una reparación universal. Los dos contornos deben seguir evaluándose como subtrazados de la misma forma. Establecer fill-rule="evenodd" en dos objetos independientes no hace que uno recorte el otro.

Si conservas nonzero, invierte solo el contorno interior cuando tu editor ofrezca ese comando. Illustrator incluye ambas opciones de regla de relleno y un control de dirección para trazados compuestos. Guarda una copia antes de invertir nada, porque las autointersecciones y múltiples espacios interiores anidados pueden producir un resultado distinto del de un anillo sencillo.

Cuando el SVG es correcto, pero el importador no

Algunas herramientas de corte, CAD, 3D y animación solo admiten un subconjunto práctico de SVG. Un navegador puede renderizar correctamente el trazado compuesto mientras el destino importa cada contorno como objeto sólido.

Utiliza este orden de reparación:

1. Guarda una copia simplificada desde el editor de origen.
2. Convierte el texto editable en contornos en esa copia cuando la importación de texto sea el punto débil.
3. Sustituye máscaras, recortes y efectos de apariencia por geometría de trazados simple solo donde sea necesario.
4. Mantén cada hueco previsto junto con su contorno exterior como un trazado compuesto.
5. Prueba evenodd y nonzero deliberadamente en lugar de alternarlos repetidamente.
6. Si el importador sigue rellenando la abertura, importa ambos límites y resta el perfil interior en el destino.

Para un flujo de extrusión, el destino también debe reconocer un perfil cerrado seleccionable. El diagnóstico de extrusión SVG trata extremos abiertos, duplicados y validez de perfiles después de conservar el hueco.

Cuando la vectorización cerró la abertura

Un vectorizador puede cerrar el espacio interior de una letra pequeña o fusionar un hueco estrecho cuando la fuente ráster es diminuta, borrosa o de bajo contraste. Es un problema de geometría, no de regla de relleno: el límite interior nunca llegó al SVG.

Vuelve a la fuente ráster y:

• amplíala o captúrala de nuevo sin añadir desenfoque;
• aumenta la separación alrededor de la abertura importante;
• elimina ruido de compresión cerca del hueco;
• reduce el suavizado o la fusión de colores si la herramienta ofrece esos controles;
• compara la nueva vectorización al tamaño final de salida.

Esta es la vía en la que PerfectVector puede ayudar. Utiliza el flujo de imagen a vector cuando tengas el ráster original y necesites una nueva vectorización SVG. Revisa cada espacio interior y negativo antes de descargar. Si el SVG era correcto hasta que un editor liberó sus trazados compuestos, repara ese SVG; volver a vectorizar no recuperará el historial de edición perdido.

El mismo enfoque de empezar por la fuente es útil para letras. La guía vectorial de lettering a mano muestra cómo mantener abiertos los espacios interiores pequeños sin eliminar el carácter de todo el dibujo.

Una comprobación final segura

Antes de enviar el SVG reparado:

• míralo sobre fondos claros, oscuros y transparentes;
• selecciona el objeto y confirma que sea un trazado compuesto intencionado;
• revisa la regla de relleno en el editor o en la fuente SVG;
• comprueba cada espacio interior de letra, anillo y espacio negativo encerrado;
• vuelve a abrir el archivo exportado en lugar de fiarte del lienzo sin guardar;
• prueba la aplicación de destino exacta;
• conserva por separado la fuente editable y la copia simplificada de entrega.

Si ahora el objeto se comporta como una sola selección, puede ser correcto. Un trazado compuesto es un objeto por diseño. Utiliza la guía de desagrupación SVG antes de separarlo de nuevo.

Preguntas frecuentes

¿Por qué se rellenaron los huecos después de utilizar Break Apart? Break Apart separó los contornos interiores del trazado compuesto exterior. Los antiguos huecos se convirtieron en objetos rellenos ordinarios. Deshaz el comando o vuelve a combinar cada contorno exterior con los interiores correctos y después verifica la regla de relleno.

¿Debo utilizar fill-rule="evenodd" para huecos SVG? evenodd suele ser práctico para contornos anidados porque la dirección no determina el resultado. Sigue funcionando dentro de una forma; no resta un objeto independiente. Conserva nonzero cuando tu fuente y destino mantengan las direcciones previstas de contornos.

¿Por qué el SVG se ve bien en un navegador, pero sólido en mi aplicación? El importador de destino puede no conservar el trazado compuesto, la regla de relleno, la máscara o la dirección de contornos. Simplifica una copia a trazados simples y prueba de nuevo. Si es necesario, importa los límites exteriores e interiores y resta el hueco en el destino.

¿Puedo crear un hueco colocando encima una forma blanca? Solo simula un hueco sobre un fondo blanco. El objeto blanco permanece relleno, así que puede imprimirse, cortarse o importarse como otro sólido. Utiliza un trazado compuesto, resta u otra estructura de transparencia cuando deba verse el fondo.

¿Puede PerfectVector reparar huecos rellenos en un SVG existente? PerfectVector es útil cuando puedes volver a una fuente ráster adecuada y crear una nueva vectorización con las aberturas previstas visibles. No repara un trazado compuesto que un editor haya liberado o un importador ignorado. Corrige esas relaciones en un editor vectorial o en la aplicación de destino.

Fuentes

1. W3C — Pintado de SVG 2 — Define nonzero, evenodd y el valor inicial de fill-rule.
2. W3C — Trazados SVG — Define trazados, subtrazados y geometría de trazados cerrados.
3. Adobe Illustrator — Crear trazados compuestos — Documenta huecos compuestos, reglas de relleno e inversión de la dirección de trazados componentes.
4. PerfectVector — Imagen a vector — Flujo actual de ráster a SVG utilizado en la vía condicional de nueva vectorización.

Si la abertura se perdió durante la vectorización de la imagen ráster, crea un vector nuevo a partir de la fuente limpia y revisa todos los espacios interiores antes de entregar. Si la versión del navegador ya es correcta, conserva esa geometría y repara solo la importación que falla.