Convertir PNG a SVG con degradados: por qué salen rayas y cómo conservar el degradado
Un degradado en un PNG son miles de colores. La mayoría de los conversores los agrupan en bandas. Cómo se recupera en su lugar un degradado SVG real, qué degradados se pueden recuperar y qué hacer para impresión y corte.
Sube un logo con un relleno suave de azul a morado a una herramienta típica de PNG a SVG y el resultado es una pila de rayas planas con bordes duros entre ellas. Sube el número de colores y las rayas se hacen más finas y más numerosas. Nunca se convierten en un degradado, porque la herramienta no tiene ni idea de que lo que está mirando es un degradado.
Por qué aparecen las rayas
Un degradado en un mapa de bits es una transición suave de miles de colores ligeramente distintos. Un conversor de posterizar y calcar reduce primero la imagen a N colores, lo que corta la transición en N bandas, y luego calca cada banda como una forma propia. El SVG es técnicamente escalable, pero el diseño ha sido sustituido por un mapa de curvas de nivel. Cada banda extra es además otro trazado, otro límite que puede mostrar un filo y otra cosa que limpiar en el editor.
Qué es un degradado SVG real
SVG tiene los elementos linearGradient y radialGradient: una dirección o un centro, unas pocas paradas de color, y el renderizador rellena la forma suavemente a cualquier tamaño. Una forma, un relleno, unos pocos bytes. Así lo habría dibujado el diseñador, y es lo que quieres en el archivo: editable en Figma o Illustrator, y suave en una pantalla 4K o en un póster.
Cómo lo recupera svgize
El motor trata el degradado como una hipótesis. Para cada región comprueba si un color plano, un degradado lineal, uno radial o uno elíptico explica mejor los píxeles, juzgado frente al ruido y la compresión medidos en la fuente. Cuando gana un degradado, se escribe como elemento de degradado con sus paradas. Cuando gana un color plano, obtienes un color plano. Nada se corta en bandas por principio; deciden los píxeles.
- Degradados lineales en cualquier dirección, incluidas las inclinadas.
- Degradados radiales y elípticos, para resplandores, botones y brillos esféricos.
- Degradados dentro de una forma que además tiene un contorno nítido: el borde se comparte con el vecino, el relleno es un degradado.
Qué no se puede recuperar
Un degradado con varios cambios de sentido en el color, un degradado de malla o un sombreado fotográfico suave no tienen un único elemento SVG que los describa. Para esos casos el motor recurre a capas tonales suaves en el modo Ilustración: se ve bien, escala, pero es una pila de formas, no un solo relleno. Si el degradado importa para editarlo después, pide al diseñador o al generador una versión más simple de dos paradas.
Impresión, corte y bordado
La impresión digital y las pantallas manejan los degradados SVG directamente. El corte de vinilo, el grabado láser y el bordado no: un degradado no se puede cortar ni bordar. Para ellos, convierte una versión del diseño en colores planos, o fija un límite de colores en svgize para que el degradado se reduzca a propósito a unos pocos escalones planos que la máquina pueda manejar. La serigrafía queda a medio camino; unos pocos escalones planos suelen imprimirse mejor sobre tela que un degradado real.
Convierte un logo con degradados
Comprobar el resultado
Abre el SVG en un editor de texto y busca ‘Gradient’. Si el relleno es un elemento con dos o tres paradas, el degradado sobrevivió. Si en cambio ves decenas de trazados con colores hex ligeramente distintos, tienes rayas. Los números de trazados y colores que aparecen junto a cada resultado de svgize te dicen lo mismo antes de descargar.