Huecos blancos entre figuras SVG: cómo diagnosticarlos y corregirlos

Las líneas blancas finas entre figuras SVG suelen ser juntas de renderizado, no agujeros en el archivo. El modelo de renderizado SVG permite que las implementaciones usen suavizado al rasterizar gráficos vectoriales; por eso, los bordes adyacentes muestreados por separado pueden dejar ver una línea muy fina del color del fondo a una escala concreta. La línea puede desaparecer con otro nivel de zoom o en otro motor de renderizado.

A veces, el hueco es real. Antes de superponer figuras, añadir trazos o unir trazados, realiza cuatro comprobaciones: cambia el zoom, cambia el fondo, exporta el dibujo como imagen rasterizada e inspecciona los trazados en la vista de contornos. Los resultados indican si debes corregir el muestreo de la visualización o la geometría.

¿Junta de renderizado o hueco real?

• Cambia o desaparece con el zoom: probablemente sea una junta de visualización.
• Cambia de color con el fondo: se está muestreando el fondo entre los bordes.
• No aparece en la vista de contornos: es posible que los límites vectoriales ya coincidan.
• Se ve en una exportación rasterizada de alta resolución: inspecciona con más detalle la precisión de exportación y la geometría.
• Persiste en una malla, una vista previa de corte o una medición del trazado: trátalo como un problema real de geometría.

Por qué los trazados que se tocan pueden mostrar una junta

Las pantallas renderizan las figuras vectoriales sobre una cuadrícula de píxeles. Cuando un borde atraviesa un píxel, el suavizado mezcla ese píxel entre la figura y el fondo para que el borde se vea suave. Dos figuras renderizadas por separado pueden mezclar cada una sus píxeles de borde, aunque sus coordenadas vectoriales coincidan.

La escala añade otra variable. Una coordenada compartida que cae exactamente en el límite de un píxel a un tamaño puede caer entre píxeles a otro. El redondeo de exportación también puede desplazar ligeramente uno de los límites. Por eso, una línea puede aparecer solo al 67% de zoom, desaparecer al 100% y volver en una miniatura web pequeña.

El SVG puede seguir siendo matemáticamente correcto. Editar la geometría antes de probarla puede crear solapamientos visibles en usos con transparencia, impresión, corte o animación.

La diferencia clave es si los contornos subyacentes comparten un borde. Una junta de renderizado puede aparecer sobre geometría que se toca; un hueco real sigue siendo visible entre los propios contornos.

Realiza cuatro pruebas antes de editar

1. Cambia el zoom

Mira el SVG con varios niveles de zoom, incluidos el 100% y una ampliación considerable. Un hueco real sigue separando los trazados al ampliarlo. Una junta de muestreo suele parpadear, cambiar de grosor o desaparecer.

No te bases solo en el zoom. Algunos huecos geométricos son menores que un píxel y también pueden cambiar de aspecto.

2. Cambia el fondo

Coloca el SVG sobre blanco, negro y un color vivo. Si la línea fina toma el color del fondo, el motor está mostrando el fondo entre bordes muestreados por separado. Puede tratarse tanto de una junta de muestreo como de un hueco transparente real, así que continúa con la inspección de contornos.

3. Exporta un PNG de alta resolución

Exporta al doble o al cuádruple de las dimensiones finales y después inspecciona el resultado reducido. Si la junta desaparece en la exportación de alta resolución, probablemente el problema fuera la rasterización dependiente de la escala. Si persiste y se puede medir, inspecciona las coordenadas y la precisión de exportación.

4. Usa la vista de contornos o de estructura alámbrica

Desactiva los rellenos e inspecciona los límites reales. Selecciona los nodos vecinos y compara sus coordenadas. Si los trazados coinciden exactamente, la línea visible es un problema del motor de renderizado. Si los extremos o bordes no coinciden, repara la geometría.

Para otras modificaciones de trazados, consulta cómo editar un SVG. Conserva una copia porque la mejor solución depende del uso del archivo.

Corrige una junta de visualización

En dibujos planos cuyos rellenos adyacentes no deben dejar transparencia entre ellos, un solapamiento diminuto y controlado suele ser la solución más fiable. Extiende ligeramente la figura inferior o más oscura bajo su vecina. El solapamiento debe ser invisible al tamaño normal y no alterar la silueta exterior.

Otras opciones son:

• Añadir un trazo muy fino del mismo color que una figura, alineado para cubrir la junta.
• Colocar una figura base del color adecuado detrás de todas las piezas adyacentes.
• Aumentar la precisión de coordenadas al exportar SVG si el redondeo separó bordes compartidos.
• Renderizar una imagen rasterizada mayor y reducirla cuando el resultado final sea PNG.

La propiedad SVG shape-rendering puede solicitar precisión geométrica o bordes más definidos, pero MDN indica que es una sugerencia de renderizado, no una garantía portable de que desaparecerán todas las juntas. Consulta cuándo ayuda crispEdges y cuándo no antes de aplicar esa sugerencia a todo el archivo.

Elige una corrección y pruébala en el destino real. Acumular varias soluciones puede crear líneas oscuras o abultamientos donde las figuras se solapan.

Corrige un hueco real en la geometría

Si la vista de contornos o el resultado posterior confirma un agujero:

1. Ajusta los nodos correspondientes a la misma coordenada.
2. Extiende los bordes vecinos hasta que realmente coincidan.
3. Une los extremos solo cuando el diseño requiera un trazado continuo.
4. Elimina segmentos duplicados o sueltos.
5. Vuelve a exportar con suficiente precisión de coordenadas.
6. Abre de nuevo el archivo y repite las cuatro pruebas.

Evita cubrir el hueco con una figura blanca. Solo oculta el síntoma sobre un fondo blanco y sigue siendo un objeto adicional en el archivo.

Si los huecos proceden del trazado de una imagen rasterizada con ruido, puede haber muchas tiras estrechas y bordes que casi coinciden repartidos por el diseño. Repararlos uno por uno puede llevar más tiempo que volver a trazar una fuente más limpia.

El destino determina la solución adecuada

Una grieta que persiste en una cara CAD o en la malla posterior difiere sustancialmente de una junta de un píxel en el navegador. Si la geometría resultante se separa, repara los trazados fuente o la tolerancia de conversión. Si la línea solo aparece en una miniatura del navegador, es posible que la geometría de producción ya sea correcta.

La lista de comprobaciones del SVG antes de cortar cubre la revisión específica para máquinas. Si el problema es falta de nitidez o píxeles ocultos en vez de juntas, usa el diagnóstico de SVG pixelados.

Dónde encaja PerfectVector

Cuando hay huecos repartidos por un trazado creado a partir de un PNG o JPG, vuelve a la imagen rasterizada antes de reparar decenas de trazados. Limpia los bloques de compresión evidentes, elimina un fondo no deseado y conserva los bordes originales más definidos. Después usa el flujo de imagen a vector para reconstruir las regiones visibles como trazados editables e inspeccionar la vista previa.

PerfectVector no puede saber si dos regiones del mismo color deben permanecer separadas para animación, corte o montaje. Usa la vista previa para comprobar siluetas y espacios negativos y después prueba el SVG descargado en su destino real. Volver a trazar resulta útil cuando la fragmentación de la fuente causó los huecos, no cuando un navegador simplemente suaviza una geometría adyacente correcta.

Preguntas frecuentes

¿Por qué aparecen líneas blancas entre los trazados SVG? El navegador o la aplicación puede estar suavizando los bordes adyacentes por separado y dejando ver el fondo a ciertas escalas. Los trazados pueden seguir coincidiendo exactamente. Cambia el zoom, el fondo, el motor de renderizado y la vista de contornos antes de editar.

¿Cómo elimino las juntas de suavizado en un SVG? En rellenos planos adyacentes, añade un solapamiento diminuto y controlado, un trazo muy fino del mismo color o una figura de respaldo. Prueba el resultado a los tamaños finales de visualización. No uses esas soluciones a ciegas para dibujos de corte, CAD, transparentes o animados.

¿Unir todos los trazados eliminará los huecos? Puede hacerlo, pero también elimina la estructura de colores y de edición independiente. Une los trazados solo cuando deban ser una misma figura. Los dibujos multicolor suelen necesitar objetos separados, así que hacer coincidir los bordes o aplicar un solapamiento controlado es más seguro.

¿Por qué los huecos solo aparecen cuando el SVG es pequeño? El escalado desplaza los límites vectoriales respecto a la cuadrícula de píxeles. A algunos tamaños, ambos bordes adyacentes se mezclan con el fondo en la misma fila o columna de píxeles. Un renderizado mayor o un ligero solapamiento puede impedir que se vea el fondo.

¿Importan los huecos diminutos del SVG para impresión 3D o corte? Importan si persisten en la cara, la malla o la trayectoria de la herramienta. Una junta que solo aparece en pantalla no demuestra que la geometría esté rota. Inspecciona la vista previa posterior y repara cualquier grieta o contorno abierto que cambie el objeto producido.

Fuentes

1. W3C — Modelo de renderizado SVG 2 — Describe el orden de pintado, el recorte, la composición y el suavizado de SVG.
2. MDN — shape-rendering — Documenta las sugerencias de renderizado disponibles para figuras SVG.
3. W3C — Sistemas de coordenadas SVG 2 — Define el modelo de coordenadas, viewport y transformaciones que explica el renderizado dependiente de la escala.

---

Si una vectorización fragmentada de una imagen rasterizada contiene huecos reales, reconstrúyela como trazados vectoriales editables e inspecciona la vista previa. Si los trazados ya coinciden, conserva el archivo y aplica únicamente la corrección de visualización mínima para el destino específico.