Los trazos del SVG desaparecen al exportar: encuentra la causa

Cuando un trazo SVG desaparece después de exportar, determina primero si la geometría del trazado sigue existiendo. Una línea que parece ausente puede no tener pintura de trazo, coincidir con el fondo, volverse demasiado fina con la nueva escala, quedar fuera del viewBox o recortarse en el borde de la página. También puede usar un pincel, un perfil de ancho variable, un filtro o una regla CSS que la aplicación de destino no interpreta.

No vuelvas a trazar la ilustración ni expandas todos los objetos de inmediato. Conserva el original editable, crea una copia de prueba y aísla una línea que falle. La reparación mínima suele conservar mejor la estructura original.

Diagnóstico rápido

1. Abre el mismo SVG en un navegador actualizado y en un editor vectorial.
2. Selecciona la línea ausente y confirma que su trazado y sus nodos siguen existiendo.
3. Aplica a la copia de prueba un color de trazo llamativo, opacidad completa y un trazo temporalmente más ancho.
4. Aléjala del borde de la página y desactiva los recortes, las máscaras y los filtros uno a uno.
5. Elimina las transformaciones o examina cómo afectan al ancho del trazo.
6. Si solo falla un destino, sustituye la apariencia incompatible en una copia para entregar.

Cuatro resultados para un trazo

Primero, comprueba si el trazado sigue ahí

Abre una copia del SVG en un editor de texto y busca elementos de forma habituales como <path>, <line>, <polyline>, <circle> o <rect>. Después, selecciona el objeto ausente en un editor vectorial y cambia a la vista de contornos o estructura alámbrica.

• Si ves nodos y un trazado en la vista de contornos, la geometría se ha conservado. Investiga el pintado, el recorte, las transformaciones y la compatibilidad de la aplicación.
• Si el objeto existe pero sus límites quedan muy lejos de la página, devuélvelo a ella o corrige el viewBox.
• Si la línea prevista se ha convertido en una forma cerrada con relleno, puede que ya se haya expandido a un contorno.
• Si no existe la geometría correspondiente, revisa el documento original y las opciones de exportación. El exportador puede haber omitido un objeto incompatible.

Compara dos motores de renderizado antes de editar. Un trazo visible en Chrome pero ausente en un editor de escritorio apunta a una limitación de importación o a una dependencia de CSS. Una línea que no aparece en ningún sitio probablemente tiene una pintura inválida, un recorte, límites incorrectos o geometría ausente. Si todo el documento está vacío, y no solo sus líneas, sigue el diagnóstico general de un SVG en blanco.

Si el trazo desaparece específicamente en Penpot, usa las comprobaciones de importación de SVG en Penpot para aislar el problema de transferencia.

Causa 1: el trazo no tiene pintura visible

SVG trata el relleno y el trazo como propiedades de pintado independientes. Un trazado puede existir sin mostrar una línea. La guía de rellenos y trazos de MDN explica las propiedades principales, entre ellas stroke, stroke-width y la opacidad.

Inspecciona el objeto seleccionado y sus estilos heredados para detectar:

• stroke="none";
• la ausencia de stroke junto con fill="none";
• stroke-width="0" o un ancho extremadamente pequeño;
• opacity="0" o stroke-opacity="0";
• un color de trazo que coincida con la página o la forma circundante;
• display="none" o visibility="hidden" en el objeto o en un grupo padre;
• una clase CSS que sobrescriba los atributos de presentación.

En una copia de prueba, asigna un color saturado, establece la opacidad al 100% y aumenta varias veces el ancho del trazo. Si un contorno grueso cubre la superficie de unas letras con relleno, consulta el orden de pintado del trazo y el relleno en SVG antes de cambiar los trazados. Coloca detrás un rectángulo de un color contrastante. Si la línea aparece, recupera el color previsto y elige un ancho que siga siendo legible al tamaño de entrega.

Recuerda que una regla de una hoja de estilos más específica puede sobrescribir un estilo declarado en el elemento. Examina el estilo calculado en las herramientas de desarrollo del navegador cuando el código indique una cosa y el navegador dibuje otra.

Causa 2: la línea se recorta en el borde de la página o del marco

Un trazo se extiende a ambos lados de su trazado central. Si ese centro queda en el límite del viewBox, la mitad del trazo puede quedar fuera de la ventana gráfica. Una línea gruesa, un extremo cuadrado, una unión en inglete, un desenfoque o una sombra necesitan más espacio del que sugieren las coordenadas del trazado por sí solas; la especificación de pintado de SVG define cómo el ancho del trazo, los extremos, las uniones y los límites de inglete extienden el resultado pintado alrededor de un trazado. Si una forma cerrada necesita la línea completamente dentro o fuera de su trazado, usa la guía de alineación interior o exterior del trazo para comparar su superficie pintada antes de cambiar el tamaño de la mesa de trabajo.

Compruébalo moviendo el objeto hacia dentro o ampliando temporalmente el viewBox. Si reaparece la parte ausente, añade un margen deliberado alrededor de la ilustración visible. No sigas ampliando el lienzo a ciegas: calcula el espacio suficiente para el ancho máximo del trazo, los extremos, las uniones y los efectos.

Examina también las referencias a clipPath y mask. Un recorte ajustado a los límites del relleno puede cortar un trazo que los sobrepasa. Los elementos SVG anidados pueden crear sus propias ventanas gráficas, y el comportamiento de overflow puede variar entre un navegador y el importador de una herramienta de diseño.

Cuando solo desaparece una esquina, busca una interacción con un valor alto de stroke-miterlimit. Un inglete agudo puede extenderse mucho más allá del trazado. Cambiar la unión a redondeada o biselada puede ser más adecuado que ampliar la ventana gráfica, pero solo si conserva el diseño previsto.

Causa 3: el escalado o las transformaciones alteraron la apariencia del trazo

Una transformación puede cambiar tanto la geometría de un objeto como la apariencia de su trazo. Una línea que se veía bien al tamaño de creación puede quedar extremadamente fina tras importar, sobre todo si la aplicación receptora interpreta de otra manera las unidades o las transformaciones anidadas.

Busca transform="scale(...)" en el trazado y en sus grupos padre. Compara el viewBox, el width y el height del documento, y después prueba al 100% de zoom y al tamaño físico final. Si todo el diseño se importa con dimensiones incorrectas, corrige la correspondencia del documento usando la prueba de escala SVG con un tamaño conocido en lugar de compensarla con anchos de trazo arbitrarios.

SVG también admite vector-effect="non-scaling-stroke". Como explica la referencia de vector-effect de MDN, su valor habitual non-scaling-stroke impide que el ancho del trazo renderizado siga las transformaciones del elemento. Puede resultar útil para diagramas de interfaz y mapas; verifica el resultado en el importador previsto, porque la compatibilidad fuera de los navegadores varía según la aplicación.

No añadas non-scaling-stroke como solución universal. Decide si la línea debe escalar con la ilustración. Si amplías un logotipo para imprimirlo, sus trazos normalmente deberían crecer con él. Si una línea de un mapa debe seguir midiendo un píxel de pantalla al hacer zoom, un trazo que no cambia de escala puede ser intencional.

Causa 4: el destino no puede reproducir la apariencia

No todas las líneas que muestra una aplicación de diseño son trazos SVG simples. Pueden ser un pincel sensible a la presión, un perfil de ancho variable, un pincel de motivo, un efecto dinámico, una fusión, un filtro o una pila de apariencias propietaria. Un exportador puede aproximar esa construcción y una segunda aplicación puede ignorar la aproximación.

Haz una prueba de simplificación en un duplicado:

1. elimina el filtro y conserva el trazo básico;
2. sustituye un motivo o pincel por un trazo sólido simple;
3. elimina el ancho variable;
4. aplana las transformaciones anidadas;
5. exporta solo ese objeto como un SVG mínimo;
6. abre ese archivo en el destino.

La primera simplificación que recupera la línea identifica la función incompatible. Entonces puedes elegir un sustituto compatible en lugar de aplanar todo el documento.

El CSS y los recursos externos son otro riesgo para la portabilidad. Un SVG incrustado en una web puede heredar una regla de clase o una propiedad personalizada de la página, mientras que el mismo archivo abierto por separado no lo hace. Por otra parte, un editor de escritorio puede descartar selectores que no sabe asignar a su modelo de objetos. Para un archivo de entrega independiente, usa estilos autónomos que la aplicación de destino importe de forma comprobada.

¿Trazo editable o trazado convertido en contorno?

Un trazo editable conserva un trazado central editable junto con los ajustes de ancho, extremos, unión, guiones y pintado. Es compacto y fácil de ajustar. Un trazo convertido en contorno transforma la franja visible en geometría de trazado con relleno. Esto fija su apariencia, pero sacrifica la línea central original y los controles del trazo.

Convierte en contornos una copia para entregar cuando el destino no pueda conservar una apariencia esencial de pincel o ancho variable, o cuando un proveedor exija expresamente geometría con relleno. La documentación de Adobe sobre la expansión de objetos describe cómo expandir los trazos en los objetos que los componen.

Conserva el original con trazos editables porque la expansión puede:

• aumentar la cantidad de nodos y el tamaño del archivo;
• ralentizar los cambios de ancho;
• convertir las superposiciones en geometría complicada;
• crear piezas separadas que deban unirse;
• cambiar el significado de los trazados abiertos para dibujo con plotter, grabado o animación.

La expansión es especialmente peligrosa cuando un plotter de pluma o un flujo de grabado espera que la herramienta recorra una sola vez el trazado central. Un trazo convertido en contorno da a la máquina dos límites. Para ese flujo, usa la guía de SVG de una sola línea.

Elige la corrección según el destino

Prueba el destino exacto, no solo otro editor del mismo fabricante. Un navegador, un lienzo de diseño, un sistema de impresión, una máquina de corte y un importador CAD pueden admitir distintos subconjuntos de SVG.

Un orden seguro para reparar

Avanza desde las comprobaciones reversibles hacia la conversión estructural:

1. conserva el original editable y crea un duplicado;
2. confirma que la geometría existe;
3. compara dos motores de renderizado;
4. prueba un color, un ancho y una opacidad de trazo explícitos;
5. comprueba el contraste del fondo y el CSS heredado;
6. examina los límites de la página, los recortes, las máscaras y las ventanas gráficas anidadas;
7. examina las transformaciones y el renderizado al tamaño final;
8. simplifica una apariencia incompatible cada vez;
9. convierte en contornos solo los trazos necesarios en una copia para entregar;
10. vuelve a abrir el SVG entregado y compáralo con el original.

No uses la rasterización como reparación intermedia cuando se conservan trazados válidos. Elimina la geometría que intentas preservar y añade un paso de trazado que puede suavizar esquinas, cambiar curvas y crear nodos innecesarios.

Dónde encaja PerfectVector

PerfectVector solo es útil cuando la geometría vectorial original se ha perdido o es inutilizable y la mejor fuente conservada es una imagen rasterizada. Puede reconstruir un logotipo, un icono o una ilustración de colores planos adecuados como formas vectoriales editables.

No repara CSS, no recupera un trazo editable omitido ni convierte un pincel incompatible conservando su línea central editable. Si el trazado sigue existiendo, corrige su pintado, sus límites, sus transformaciones o su apariencia en un editor vectorial. Eso conserva más información que trazar una captura de pantalla.

Preguntas frecuentes

¿Por qué desaparecen los trazos SVG al exportar? El trazado puede seguir existiendo, pero no tener un trazo visible, tener opacidad cero, un color igual al fondo, un ancho extremadamente fino, un recorte, un problema de escala o una apariencia que el destino no puede importar. Confirma primero la geometría y después aísla el pintado, los límites, las transformaciones y la compatibilidad.

¿Cómo sé si el trazado sigue existiendo? Selecciona el objeto ausente en un editor vectorial y cambia a la vista de contornos o estructura alámbrica. También puedes abrir el SVG como texto y buscar el elemento de trazado o forma correspondiente. Si hay nodos pero no una línea visible, el problema apunta al renderizado o al estilo, no a una geometría ausente.

¿Por qué se recorta un trazo en el borde de un SVG? Un trazo se extiende más allá del trazado central, de modo que un trazado situado en el límite del viewBox puede perder la mitad de su ancho. Los extremos, las uniones, los filtros, los recortes y las máscaras también pueden necesitar margen adicional. Mueve el trazado hacia dentro o ajusta deliberadamente la ventana gráfica y el recorte alrededor de la apariencia completa.

¿Debo expandir los trazos SVG antes de exportar? Solo cuando el destino no pueda conservar una apariencia esencial del trazo o exija expresamente geometría con relleno. Expande una copia para entregar y conserva el original con trazos editables. La expansión añade geometría y no es adecuada cuando un plotter o una herramienta de grabado debe seguir una única línea central.

¿Puede PerfectVector recuperar un trazo SVG ausente? No a partir de un SVG cuyo trazado o estilo solo necesita repararse. PerfectVector puede reconstruir una ilustración visible a partir de la mejor imagen rasterizada conservada cuando no está disponible la geometría vectorial original, pero no recupera CSS, ajustes de pincel ni el trazado central editable original.

Fuentes

1. W3C — Pintado de SVG 2 — Define el relleno, el trazo, el ancho del trazo, los extremos, las uniones y los efectos vectoriales.
2. W3C — Sistemas de coordenadas de SVG 2 — Documenta las ventanas gráficas, el viewBox, las unidades y las transformaciones.
3. MDN — vector-effect — Explica el comportamiento de non-scaling-stroke.
4. Adobe Illustrator — Agrupar y expandir objetos — Documenta la expansión de trazos en objetos componentes editables.

---

Cuando la geometría vectorial original se haya perdido y la mejor fuente conservada sea rasterizada, reconstruye la ilustración como trazados vectoriales limpios con PerfectVector y después verifícala en la aplicación de destino. Si los trazados siguen existiendo, repara el SVG en lugar de volver a trazarlo.