El SVG se abre en blanco: siete comprobaciones antes de rehacerlo

Si un SVG se abre en blanco, duplica el archivo antes de guardar o exportar nada. El diseño puede seguir presente, pero fuera del viewBox visible, pintado transparente o blanco, oculto por un recorte o máscara o construido con una función que una aplicación no admite. Volver a guardar un documento en blanco puede convertir un archivo recuperable en uno realmente vacío.

Abre la copia en un navegador y en un editor vectorial. Esa comparación es la primera bifurcación: si se ve en uno, pero está en blanco en el otro, suele ser un problema de compatibilidad de la aplicación o estructura del documento; si está en blanco en todos, apunta más a ventana, pintura, recorte, marcado inválido o contenido ausente.

Las comprobaciones son un mapa de diagnóstico, no siete reparaciones independientes. Confirma que exista geometría y después prueba sus límites, escala, pintura, recorte, efectos compatibles y dependencias antes de sustituir nada.

1. Conserva el archivo y comprueba si contiene datos

Haz una copia con otro nombre. Después comprueba su tamaño y ábrela en un editor de texto plano.

Un archivo de cero bytes o un documento con solo un elemento raíz <svg> vacío ofrece poco que recuperar de esa copia. Un archivo que contiene trazados, grupos, estilos o un bloque grande de datos codificados no está vacío solo porque el lienzo lo parezca.

No deduzcas demasiado de un tamaño grande. El archivo podría contener una imagen incrustada de alta resolución, estilos repetidos o datos mal formados. El tamaño solo indica que merece la pena seguir inspeccionando.

2. Compara un navegador y un editor vectorial

Arrastra el SVG a un navegador actual y después abre la misma copia en Inkscape, Illustrator, Figma u otro editor vectorial.

Que el navegador muestre el archivo no demuestra que contenga trazados vectoriales portables. Los navegadores pueden renderizar imágenes rasterizadas incrustadas y contenido web que CAD o editores vectoriales ignoran.

3. Selecciona todo e inspecciona los límites

En el editor vectorial, utiliza Seleccionar todo. Busca un cuadro de selección, coordenadas, ancho y alto.

• Un cuadro de selección muy lejos de la página indica que el diseño está fuera del lienzo.
• Una selección enorme puede indicar un punto suelto, un objeto de recorte o un rectángulo de fondo.
• Un cuadro de selección normal con diseño invisible apunta a pintura, opacidad o recorte.
• Ningún objeto seleccionable sugiere contenido no compatible, un documento vacío o una importación fallida.

Si los objetos están fuera del lienzo, mueve la selección a la página o redimensiona la página al dibujo. Evita escalar los trazados salvo que sus dimensiones reales también sean incorrectas.

4. Compara el diseño con el viewBox

Abre el SVG como texto e inspecciona el elemento raíz:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

Los cuatro números de viewBox son x mínima, y mínima, ancho y alto, según la especificación del sistema de coordenadas SVG. Un diseño con coordenadas alrededor de 10000,10000 no aparecerá dentro de viewBox="0 0 800 600". Una dimensión de viewBox cero o negativa desactiva el renderizado de ese elemento.

Corrige los límites visibles según la geometría real. No pegues un viewBox aleatorio de otro archivo. La guía de tamaños incorrectos de SVG explica cómo interactúan viewBox y las dimensiones de ventana cuando el diseño es visible, pero tiene una escala incorrecta.

5. Comprueba la pintura y la visibilidad

Selecciona un objeto e inspecciona relleno y trazo. Estos son estados invisibles habituales:

• fill="none" sin trazo;
• relleno blanco sobre un lienzo blanco;
• opacity="0", fill-opacity="0" o stroke-opacity="0";
• display="none" o visibility="hidden";
• una clase cuya hoja de estilos aplica uno de esos valores;
• un trazo extremadamente fino a la escala actual.

Coloca temporalmente un rectángulo de color detrás del diseño o asigna un relleno de prueba llamativo a una copia de un trazado. Si aparece, restaura los estilos previstos en lugar de dejar el color de diagnóstico en el archivo final.

Si los rellenos siguen visibles, pero algunas líneas desaparecen al exportar, utiliza la guía de trazos SVG que desaparecen para probar pintura del trazo, recorte, escala y apariencias no compatibles sin volver a trazar una buena geometría.

6. Inspecciona funciones que el destino puede no admitir

Busca en el marcado clipPath, mask, pattern, filter, <image> y <foreignObject>.

Los recortes y las máscaras pueden ocultarlo todo cuando fallan sus sistemas de coordenadas o referencias; el modelo de renderizado SVG sitúa el recorte, las máscaras, el filtrado y la composición dentro del proceso de renderizado. Los patrones y filtros pueden renderizarse de forma diferente según el importador. Un elemento <image> incrusta contenido de imagen dentro del contenedor SVG, mientras que <foreignObject> puede contener contenido de otro espacio de nombres XML, como describe la especificación de contenido incrustado SVG.

Si las formas se conservan, pero desaparecen las etiquetas HTML, compara foreignObject con texto SVG nativo y sustituye solo la etiqueta que falla.

Si los trazados se ven, pero se corta una sombra, diagnostica una sombra SVG recortada probando por separado la región del filtro y la ventana exterior.

Las referencias también pueden fallar. Comprueba que los identificadores utilizados por url(#name) existan y sean únicos. Si el SVG depende de una imagen externa, fuente, hoja de estilos o archivo vinculado, moverlo puede haber roto ese recurso.

Para una aplicación Qt, la guía del renderizador SVG en Qt distingue las comprobaciones de módulos y carga de los límites de funciones compatibles. Compara primero un original pequeño y después inspecciona el diseño mediante el método de renderizado elegido.

Cuando un navegador muestra el diseño, pero CAD no importa nada, busca geometría vectorial corriente como <path>, <rect>, <circle> y similares. Un PNG incrustado visible no tiene curvas que pueda utilizar CAD.

7. Valida o vuelve a exportar el archivo

Un renderizador puede tolerar XML mal formado, atributos inválidos y estructuras específicas de exportadores que otro rechaza. Si tienes el diseño original, vuelve a abrirlo en la aplicación donde se creó y exporta una copia SVG sencilla o simplificada. Expande solo las funciones que el destino no pueda manejar y compara el nuevo archivo con el original.

Si no tienes el original, utiliza un validador SVG/XML o un editor de texto que indique errores de sintaxis. Trabaja sobre una copia y corrige primero el primer error estructural, porque los mensajes posteriores pueden ser consecuencias de él.

No ejecutes un optimizador sobre la única copia. La optimización reescribe la estructura y puede dificultar la recuperación cuando no se entiende el problema.

Cuándo reconstruir o vectorizar de nuevo

Volver a vectorizar es adecuado cuando el archivo solo contiene una imagen rasterizada incrustada, la estructura SVG generada es inutilizable fuera del navegador o no queda ningún original editable. Extrae o localiza la imagen rasterizada de mayor calidad y después vectorízala para obtener trazados reales.

No es la solución adecuada para trazados fuera del lienzo, un viewBox roto, rellenos blancos o una máscara no compatible. Esos archivos ya tienen geometría y conservarla evita una pérdida innecesaria de calidad.

Si todo el diseño se selecciona como una única imagen de píxeles o se vuelve cuadriculado al ampliar mucho, utiliza el diagnóstico de píxeles ocultos antes de reconstruir.

Dónde encaja PerfectVector

El proceso de imagen a vector de PerfectVector sirve para el caso exclusivamente rasterizado. Sube el mejor PNG, JPG u otra imagen compatible e inspecciona la vista previa vectorial en busca de formas reales, bordes limpios, espacio negativo y trazados manejables.

No repara marcado SVG arbitrario ni recupera recursos externos. Si el archivo ya contiene buenos trazados, corrige la ventana, los estilos o la función no compatible en un editor vectorial. Si solo son píxeles dentro de un contenedor SVG, reconstruir el diseño visible como trazados proporciona un vector portable en lugar de otro envoltorio.

Preguntas frecuentes

¿Por qué mi SVG está en blanco en Illustrator, pero visible en Chrome? El archivo puede utilizar una función que admite el navegador, pero Illustrator no importa, como contenido web incrustado, un patrón complejo, filtro, máscara o contenedor rasterizado. Inspecciona el marcado y comprueba si contiene trazados vectoriales corrientes antes de volver a exportar una copia SVG más sencilla.

¿Cómo encuentro un diseño SVG que está fuera del lienzo? Utiliza Seleccionar todo e inspecciona los límites o coordenadas de la selección. Si aparece un cuadro lejos de la página, muévelo a la página o redimensiona la página al dibujo. Después actualiza el viewBox para que coincida con la geometría visible prevista.

¿Puede un SVG ser blanco y parecer vacío? Sí. Los rellenos o trazos blancos desaparecen sobre un lienzo blanco. El archivo también puede utilizar opacidad cero, display="none" o visibility="hidden". Prueba sobre un fondo de color e inspecciona los estilos calculados.

¿Por qué se importa mi SVG en blanco en Fusion u otra aplicación CAD? El archivo puede contener un mapa de bits incrustado o contenido web no compatible en lugar de curvas vectoriales. CAD necesita geometría de trazados que pueda importar. Busca <path> y formas relacionadas y comprueba si el contenido visible está en cambio dentro de <image> o <foreignObject>.

¿Debo convertir un SVG en blanco en PNG y después de nuevo en SVG? Solo si el SVG no tiene geometría vectorial recuperable y su apariencia rasterizada es el mejor original conservado. Un recorrido por PNG destruye la estructura de trazados existente. Diagnostica primero problemas de ventana, visibilidad, recorte y compatibilidad.

Fuentes

1. W3C — Sistemas de coordenadas de SVG 2 — define ventanas, viewBox, unidades y transformaciones.
2. W3C — Modelo de renderizado de SVG 2 — documenta recortes, máscaras, filtrado, composición y orden de renderizado.
3. W3C — Contenido incrustado de SVG 2 — define imágenes incrustadas y contenido externo en SVG.
4. W3C — Servicio de validación de marcado — ofrece validación de documentos basada en estándares para depurar marcado.

Cuando el archivo conservado son solo píxeles dentro de un contenedor SVG, reconstruye el diseño como trazados vectoriales editables e inspecciona la vista previa. Cuando ya hay buenos trazados, consérvalos y repara la parte más pequeña del documento que falla.