¿Por qué mi SVG se vuelve negro o pierde sus colores?
Descubre por qué un SVG aparece negro, transparente o con colores incorrectos en navegador, Canva, Cricut u otro importador y corrígelo.
Respuesta rápida
Un SVG suele volverse negro porque sus formas no tienen relleno explícito, dependen de CSS externo, heredan currentColor de otro entorno o pierden un degradado, máscara o estilo durante la importación. El negro es el relleno predeterminado cuando no llega otra pintura a la forma. Revisa el archivo antes de cambiar colores: normaliza el código con el limpiador seguro de SVG y utiliza el reemplazo de colores SVG solo cuando conozcas la paleta correcta.
Identificar dónde cambia el color
Abre el mismo archivo directamente en un navegador, en la aplicación de destino y en un editor vectorial. Si se ve bien en el navegador pero negro tras subirlo, el importador probablemente ignora un bloque de estilos, una clase, un filtro o un color heredado. Si aparece negro en todas partes, el propio archivo puede carecer de rellenos utilizables.
| Síntoma | Causa probable | Próximo paso |
|---|---|---|
| Todo queda negro | Faltan rellenos o se eliminó CSS | Añadir atributos de relleno |
| El icono sigue el color del texto | currentColor es intencionado | Definir el color o reemplazarlo |
| Solo el degradado queda negro | Referencia rota | Reparar el ID o usar colores planos |
| El diseño desaparece | Relleno none, opacidad cero o máscara fallida | Revisar relleno, opacidad y máscaras |
| Los colores cambian al subir | Soporte SVG limitado | Convertir estilos esenciales en atributos |
Reparar sin destruir el archivo
- Guarda una copia intacta.
- Ejecuta el comprobador de SVG y anota estilos, currentColor, máscaras, filtros, degradados e imágenes.
- Convierte las clases necesarias en atributos directos de relleno y trazo.
- Conserva la transparencia intencionada y no conviertas un diseño multicolor en monocromo.
- Usa identificadores únicos para degradados y máscaras cuando haya varios SVG en una página.
- Comprueba el archivo reparado sobre fondos blanco, oscuro y de cuadrícula y dentro de la aplicación final.
Casos especiales
En un icono web en línea, currentColor es útil porque CSS controla su aspecto. Al cargar el mismo archivo como imagen o en otro servicio, ese color puede desaparecer. Para una entrega predecible, usa colores explícitos cuando la apariencia fija sea prioritaria.
Algunas aplicaciones de corte admiten solo una parte sencilla de SVG. Rellenos planos y trazados viajan mejor que CSS enlazado, filtros o máscaras complejas. Simplificar compatibilidad no significa rasterizar.
Preguntas frecuentes
¿Por qué es negro en Cricut o Canva y correcto en el navegador?
El navegador puede aplicar estilos que el importador no admite. Convierte los estilos necesarios en atributos directos.
¿Puedo recuperar automáticamente los colores originales?
Solo si todavía existen en el archivo o conoces la paleta aprobada. No se puede reconstruir con certeza información ausente.
¿Un SVG negro está siempre roto?
No. Muchos iconos son monocromos a propósito y usan currentColor para que la aplicación controle el color.