Por qué cambian los colores SVG al exportar: diagnostica la causa

Un SVG cambia de color después de exportarlo cuando el aspecto de la fuente y el archivo entregado se interpretan de formas diferentes. El exportador puede convertir los valores de color. Un sitio web puede reemplazar fill mediante CSS o resolver currentColor a partir de un elemento padre. Un degradado, un ajuste de opacidad, un modo de fusión o un filtro pueden depender de una función que el destino gestione de otra manera. A veces el código exportado es correcto y el problema se limita a un importador.

No empieces por sustituir todos los valores hexadecimales. Primero localiza el punto en el que cambia el aspecto. Eso te dirá si debes reparar el SVG, cambiar la exportación, simplificar una copia de entrega o conservar el gráfico en otro formato.

Relaciona el síntoma con la primera comprobación

Dónde mirar primero

Aísla el problema en cinco minutos

1. Conserva intacto el maestro editable

Guarda una copia para las pruebas. No aplanes efectos, conviertas todos los objetos en contornos ni sustituyas colores en la única copia editable. Esos cambios pueden ocultar la causa y dificultar las revisiones posteriores del archivo.

2. Abre el SVG exportado en dos lugares

Utiliza un navegador actual como referencia neutral y después abre o importa el mismo archivo en el destino real. Compara ambos con el gráfico de origen sobre el mismo fondo.

• Si ambas vistas exportadas son incorrectas, investiga el exportador o el SVG serializado.
• Si el navegador muestra correctamente el archivo por separado y el destino no, investiga la incrustación, el CSS o la compatibilidad del importador.
• Si solo difieren las regiones transparentes o con fusión, prueba el fondo y los efectos antes de tocar los rellenos sólidos.

Un navegador es una referencia útil, pero no demuestra que todas las aplicaciones de diseño o producción importen el mismo conjunto de funciones.

3. Revisa las instrucciones de pintado

Abre el SVG en un editor de texto y busca:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Buscas la estructura; todavía no vas a reescribirla. Un valor literal fill="#2F6BFF" apunta a una causa distinta de fill="currentColor" o fill="url(#paint0)".

Si es la primera vez que abres código SVG, la guía general para editar un SVG explica las vías mediante código y editor visual.

4. Reduce un objeto que falle

Copia el objeto más pequeño que siga cambiando en un documento nuevo y expórtalo. Elimina las funciones de una en una: primero el filtro, después el modo de fusión, luego el degradado y por último la opacidad de grupo. La primera eliminación que corrija el resultado identifica la función no compatible o dependiente del contexto.

Esta prueba de reducción es más segura que aplanar toda la ilustración porque revela una restricción concreta de entrega.

Causa 1: el exportador convirtió el espacio de color

Los colores hexadecimales y la sintaxis habitual rgb() describen colores sRGB. El CSS moderno también puede expresar espacios de gama más amplia, como Display P3, mediante color(), tal como define el Módulo de color CSS de nivel 4. Por tanto, una aplicación de diseño puede contener un color de origen que necesite convertirse antes de expresarse como un valor hexadecimal sRGB, y esa conversión puede cambiar las cifras o limitar un color fuera de gama.

Comprueba el problema en este orden:

1. anota el espacio de color del documento de origen y el valor numérico del objeto seleccionado;
2. exporta un único objeto plano sin opacidad ni efectos;
3. abre el SVG como texto y lee el valor serializado de fill o stroke;
4. compara la cifra exportada con la de origen;
5. prueba el mismo archivo en el destino.

Si el valor ha cambiado en el archivo, la conversión se produjo durante la exportación. Elige deliberadamente el espacio de color de destino y vuelve a exportar. Si el valor no ha cambiado, pero el aspecto difiere, pasa al CSS, los efectos, el fondo o el comportamiento del importador.

Para trabajos de impresión que requieran separaciones CMYK, tintas planas o una composición específica de negro, conserva el maestro de referencia para impresión en el formato nativo de la aplicación de diseño y entrega el formato que solicite la imprenta, a menudo PDF. Un SVG puede seguir siendo útil para pantalla, pero no debería convertirse silenciosamente en la referencia de color de un flujo que no puede describir de forma fiable.

Causa 2: currentColor o CSS reemplazaron el pintado

SVG puede recibir estilos mediante CSS. La especificación de estilos de SVG 2 indica que los atributos de presentación como fill participan en la cascada CSS con especificidad cero, de modo que el CSS del autor puede reemplazarlos. Un SVG insertado directamente en HTML también comparte documento con la página que lo rodea, lo que permite que nombres de clase genéricos entren en conflicto con los estilos del sitio.

currentColor es una referencia indirecta intencionada. La referencia del atributo color de SVG en MDN explica que proporciona un valor para fill, stroke, las paradas de degradado y otras propiedades de pintado. Es útil para iconos que deben seguir el color del texto circundante, pero también significa que el archivo no tiene un color fijo en ese punto.

Utiliza una de estas dos estrategias de entrega:

• Para un icono web adaptable al tema, conserva currentColor y establece un color explícito en el SVG o en su elemento padre previsto.
• Para un recurso independiente que deba conservar su propia paleta, escribe rellenos y trazos explícitos y limita el alcance de las clases internas con nombres que no entren en conflicto.

Cuando varios SVG insertados en HTML contengan identificadores como paint0, clip0 o gradient1, haz que sean únicos y actualiza sus referencias al mismo tiempo. No cambies solo el id; cada url(#id) debe seguir resolviéndose.

Si tu objetivo es cambiar el color de forma deliberada en lugar de corregir una variación de exportación, utiliza la guía específica para cambiar los colores de un SVG de forma segura.

Causa 3: se rompió un degradado o una referencia de pintado

Los degradados y patrones SVG son servidores de pintado. Una forma apunta a ellos mediante una referencia como fill="url(#brandGradient)", mientras que la definición del degradado suele estar en <defs>. La especificación de servidores de pintado de SVG 2 también define cómo afectan al resultado las coordenadas y las transformaciones del degradado.

Tres comprobaciones detectan la mayoría de los fallos estructurales:

1. cada url(#id) tiene una definición correspondiente;
2. los identificadores siguen siendo únicos después de combinar varios SVG en una página o documento;
3. el destino conserva el tipo de pintado, las unidades, las transformaciones y las paradas de degradado que utiliza el archivo.

Si un relleno sólido sencillo se importa correctamente, pero el degradado no, conserva el degradado en el maestro y crea una copia de entrega para el destino. Prueba primero con un degradado lineal o radial más sencillo. Si el destino sigue sin poder reproducirlo y el aspecto exacto importa más que el pintado editable, utiliza un formato o un recurso aplanado compatible con el flujo receptor. Identifica claramente esa copia para que no sustituya a la fuente editable.

Causa 4: la opacidad y la fusión cambiaron el resultado visible

El píxel visible no siempre corresponde al relleno almacenado. fill-opacity afecta al relleno de una forma, la opacity de grupo se aplica después de combinar los elementos hijos del grupo y un modo de fusión mezcla la fuente con su fondo. La especificación de composición y fusión del W3C define el orden de renderizado y las fórmulas de fusión dependientes del fondo.

Esto tiene dos consecuencias prácticas:

• El mismo SVG puede verse diferente sobre blanco, negro o una página de color sin que cambie ningún valor de color.
• Trasladar la opacidad de un grupo a cada elemento hijo puede cambiar las superposiciones porque el orden de composición es distinto.

Prueba sobre el fondo real. Después elimina mix-blend-mode, los filtros, las máscaras y la opacidad de grupo de uno en uno en una copia. Si el destino no puede conservar un efecto esencial, elige entre un tratamiento vectorial simplificado y un recurso de entrega aplanado. No aplanes partes del diseño que no estén relacionadas con el problema.

Un rectángulo blanco o de color detrás del gráfico es un caso distinto. La guía de SVG con fondo transparente muestra cómo distinguir una forma de fondo real de un lienzo vacío.

Causa 5: el destino importó solo una parte del SVG

SVG es un estándar web, pero muchas herramientas de escritorio, impresión, corte, presentaciones y creación de sitios lo traducen a su propio modelo de objetos. La compatibilidad puede variar según la aplicación y la versión. Evita afirmaciones como «esta aplicación nunca admite degradados» salvo que lo indique la documentación oficial actual y coincida con tu versión exacta.

Utiliza en su lugar una prueba de importación controlada:

1. importa un único trazado con relleno sólido;
2. añade el degradado original;
3. añade la opacidad;
4. añade la fusión o el filtro;
5. detente en la primera versión que cambie.

Ahora conoces el límite de ese destino. Conserva el maestro completo y exporta una copia de entrega que se mantenga dentro del límite probado. Si lo que desaparece son los trazos, sigue el diagnóstico específico de exportación de trazos en lugar de convertir todas las líneas en rellenos.

Elige la corrección segura más pequeña

Dónde encaja PerfectVector

PerfectVector es útil cuando la fuente vectorial ya se ha perdido o es inutilizable y el mejor gráfico conservado es una imagen ráster. Puedes convertir esa imagen en formas vectoriales editables y después revisar la paleta, la transparencia y los trazados antes de abrir el resultado en el destino.

No repara CSS heredado, ni restaura definiciones de degradado que falten, ni recupera el perfil de color de una aplicación de diseño, ni conserva modos de fusión no compatibles, ni cambia el analizador de un importador. Si el SVG aún contiene buenos trazados e instrucciones de pintado, repara el archivo en lugar de volver a vectorizar una captura de pantalla. Así conservarás más estructura original.

Lista de comprobación de entrega

• Conserva el maestro editable y realiza las correcciones en una copia.
• Compara el archivo exportado en un navegador y en el destino real sobre el mismo fondo.
• Comprueba si han cambiado los valores serializados de fill y stroke.
• Busca currentColor, clases genéricas e identificadores repetidos.
• Relaciona cada referencia url(#id) con su definición.
• Prueba por separado la opacidad de grupo, los modos de fusión, los filtros y las máscaras.
• Simplifica solo la función que el destino no pueda reproducir.
• Vuelve a abrir o importar el archivo final de entrega antes de sustituir la versión anterior.

Preguntas frecuentes

¿Por qué mi SVG se ve bien en un navegador, pero mal después de importarlo? Probablemente el archivo utiliza una función o un contexto de estilos que el destino traduce de otra manera. Importa un trazado sólido y vuelve a añadir de uno en uno el degradado, la opacidad, la fusión o el filtro. El primer paso que falle identifica el límite del destino sin dañar el maestro.

¿Los archivos SVG son siempre RGB? Los colores habituales hexadecimales y rgb() son sRGB, mientras que el CSS moderno también puede expresar espacios como Display P3. Las aplicaciones de diseño e impresión pueden convertir esos colores durante la exportación o importación. Revisa el color serializado y utiliza el formato de producción que solicite la imprenta para trabajos CMYK o con tintas planas.

¿Por qué mi SVG se volvió negro después de exportarlo? Comprueba si el archivo utiliza currentColor, perdió una regla CSS o hace referencia a un degradado o identificador de pintado que falta. El negro puede ser un color heredado o un síntoma de un valor alternativo, y no necesariamente una sustitución del relleno original. Compara el archivo independiente con la versión incrustada o importada.

¿Debo sustituir todos los valores hexadecimales cuando los colores se ven mal? No. Determina primero si los valores cambiaron durante la exportación. Si las cifras están intactas, sustituirlas puede ocultar un problema de CSS, referencias de pintado, fusión, fondo o importador y hacer que el archivo sea menos preciso en otros entornos.

¿Puede PerfectVector reparar un SVG cuyos colores cambiaron después de exportarlo? No cuando el SVG solo necesita reparar su CSS, degradados, opacidad, perfil o comportamiento del importador. PerfectVector encaja cuando el vector original se ha perdido y necesitas reconstruir gráficos ráster planos adecuados como formas vectoriales editables.

Fuentes

1. W3C — Estilos de SVG 2 — Define los estilos CSS, los atributos class y style, los atributos de presentación, el comportamiento de la cascada y la herencia en SVG.
2. MDN — Atributo SVG color — Explica cómo currentColor proporciona valores de pintado para rellenos, trazos, paradas de degradado y propiedades relacionadas.
3. W3C — Servidores de pintado de SVG 2 — Define los degradados lineales y radiales, las referencias de pintado, los sistemas de coordenadas, las transformaciones y la interpolación de color.
4. W3C — Módulo de color CSS de nivel 4 — Define la sintaxis de color sRGB y espacios predefinidos más amplios, incluido Display P3.
5. W3C — Composición y fusión de nivel 1 — Define los grupos de opacidad, el orden de composición, los fondos y los modos de fusión para SVG y CSS.

Si la mejor fuente conservada es un PNG o JPG, reconstrúyela como SVG con PerfectVector y compara después el resultado en un navegador por separado y en el destino final antes de sustituir el archivo anterior.