Convierte pixel art a vector sin perder los bordes nítidos

Puedes convertir pixel art a vector, pero decide primero si los píxeles cuadrados deben seguir visibles. Para conservar el aspecto original, reconstruye la imagen como una cuadrícula o mosaico de objetos. Para convertir el sprite en una ilustración suave, utiliza vectorización de contornos. Son resultados diferentes, y una vectorización genérica no puede elegir el adecuado por ti.

Si editas un sprite de juego en Scratch, su botón Convert to Vector cambia el modo de edición sin vectorizar el mapa de bits. Utiliza las comprobaciones de edición de disfraces de Scratch para decidir si conservar los píxeles, redibujar una parte o importar formas SVG vectorizadas, y después compara el centro del disfraz de sustitución con el original.

Si el verdadero objetivo es simplemente mostrar pixel art nítido en un sitio web o un juego, quizá no necesites un SVG. Un PNG con el tamaño correcto y un escalado de tipo vecino más próximo suele ser más pequeño y fiel al original; en la web, la propiedad image-rendering ofrece los comportamientos crisp-edges y pixelated, pensados para conservar bordes duros.

Tres resultados que resuelven tres trabajos diferentes

La cuestión no es tanto qué formato es «mejor» como qué significan los bloques. En pixel art, los bordes escalonados suelen ser deliberados. Suavizarlos puede ser tan destructivo como añadir desenfoque a un dibujo de líneas.

Conservar la cuadrícula y suavizar contornos son trabajos diferentes

Método 1: conserva exactamente la cuadrícula de píxeles

La conversión vectorial más literal convierte las celdas raster en rectángulos vectoriales. Un píxel rojo se convierte en un cuadrado rojo. Una serie de píxeles rojos adyacentes puede mantenerse como cuadrados separados o unirse en una forma rectangular mayor cuando eso no cambie la silueta.

Antes de empezar, encuentra las dimensiones reales de la cuadrícula de la ilustración. Un sprite mostrado a 800 por 800 píxeles puede haber comenzado como una cuadrícula de 32 por 32 ampliada con escalado por vecino más próximo. La estructura de 32 por 32 es lo que quieres reproducir, no las dimensiones ampliadas de visualización.

Flujo Object Mosaic de Illustrator

Adobe documenta un método integrado para convertir un mapa de bits incrustado en un mosaico:

1. Coloca el pixel art original en Illustrator e incrústalo.
2. Selecciona la imagen y elige Object > Create Object Mosaic.
3. Establece el número de teselas para que coincida con la cuadrícula de píxeles original cuando la conozcas.
4. Utiliza teselas cuadradas y salida en color.
5. Conserva el raster original hasta inspeccionar el mosaico y después elimínalo u ocúltalo.
6. Compara la silueta exterior, los huecos interiores y la paleta con el original a gran ampliación.

La documentación de Create Object Mosaic de Adobe describe el comando, la opción de teselas cuadradas, el ajuste de color y la gestión del raster original. El flujo de pixel art es un uso práctico de ese comportamiento de mosaico documentado.

Un mosaico de objetos puede ser fiel en estructura y seguir siendo ineficiente. Un sprite de 64 por 64 tiene 4,096 celdas antes de unir ninguna. Elimina las celdas totalmente transparentes, combina rectángulos adyacentes del mismo color cuando sea posible y evita llevar objetos invisibles al SVG final.

Método 2: crea un SVG de cuadrícula sin Illustrator

Puedes construir el mismo tipo de archivo con un script que tenga en cuenta los píxeles o un conversor especializado. El principio importa más que la aplicación:

1. Lee el original a su tamaño nativo de cuadrícula.
2. Asigna a cada píxel no transparente un rectángulo vectorial exacto.
3. Conserva los valores de la paleta sin suavizado de bordes.
4. Une celdas vecinas solo cuando la forma unida produzca la misma cuadrícula visible.
5. Exporta con un viewBox SVG que coincida con las dimensiones nativas de la cuadrícula.
6. Prueba el SVG a tamaños de visualización enteros y no enteros.

El proyecto de código abierto vectorize-pixelart es un ejemplo de utilidad de conversión específica para píxeles. También ilustra un límite general: las cuadrículas grandes o complejas pueden producir SVG pesados. Trata una utilidad antigua primero como material de investigación. Revisa su código y estado de mantenimiento antes de añadirla a un flujo de producción.

Si manejas el marcado SVG con comodidad, también puedes reconstruir manualmente un sprite diminuto con elementos <rect>. Es razonable para un icono de 12 por 12. No es una forma sensata de pasar la tarde para una escena detallada.

Método 3: suaviza las formas deliberadamente

A veces los píxeles son un borrador y no la identidad. Quizá quieras que el personaje, flor o icono se convierta en un adhesivo limpio, gráfico impreso o logotipo con contornos redondeados.

Si quieres deliberadamente esa interpretación suavizada, PerfectVector encaja con el método de contornos. Sube la versión más grande ampliada por vecino más próximo de la ilustración que tengas y después juzga el resultado como una ilustración nueva:

1. Elimina primero el suavizado de bordes. Los píxeles suaves de las franjas crean colores adicionales y formas diminutas en los bordes.
2. Mantén la paleta controlada. Si el original usa ocho colores, una vectorización no debería inventar decenas por compresión o desenfoque.
3. Inspecciona las diagonales escalonadas. Decide cuáles deberían convertirse en segmentos rectos y cuáles en curvas.
4. Comprueba los huecos y espacios de un píxel. Las aberturas pequeñas pueden cerrarse al simplificar regiones vecinas.
5. Revisa el número de nodos. El objetivo de suavizar no es sustituir cada esquina cuadrada por varias curvas diminutas.
6. Prueba al tamaño de destino. Una curva suave agradable a tamaño de cartel puede borrar una cara o mano a tamaño de icono.

Este método cambia la ilustración. Guarda el PNG original junto al SVG para que nadie confunda la interpretación vectorial con una versión exacta destinada a la conservación del original.

Problemas de preparación que empeoran todos los métodos

El original se redimensionó con suavizado. Vuelve al sprite nativo o redimensiónalo con interpolación por vecino más próximo. Una vez integrados nuevos colores mezclados en los bordes, es más difícil recuperar la cuadrícula original.

El archivo es un JPG. La compresión crea bloques de color y halos alrededor de cada borde duro de píxel. Usa el PNG original siempre que puedas.

El fondo transparente se volvió blanco opaco. Un fondo blanco puede convertirse en miles de celdas no deseadas o una gran forma vectorizada. Restaura la transparencia antes de convertir y después comprueba el resultado sobre un lienzo que contraste. Nuestra guía de fondos SVG transparentes explica esa auditoría.

La ilustración contiene efectos semitransparentes. Los resplandores, las sombras y la opacidad parcial no son celdas de píxel tradicionales. Decide si conservarlos como efectos raster, reducirlos a colores sólidos o rediseñarlos para la versión vectorial.

¿Necesitas vectores para un sitio web?

No necesariamente. Si la ilustración es un sprite de juego o icono de interfaz, un PNG puede seguir siendo el maestro correcto. Utiliza un recurso de tamaño nativo, amplíalo por múltiplos enteros cuando sea posible y configura el navegador o motor de renderizado para utilizar interpolación pixelada o por vecino más próximo.

Una cuadrícula SVG ayuda cuando la paleta debe editarse como objetos, el trabajo necesita imprimirse a gran tamaño o el sistema de entrega requiere específicamente vectores. No hace automáticamente más ligero un recurso pequeño de pantalla. Un objeto vectorial por cada celda puede pesar más que un PNG compacto.

Este es uno de los casos en los que «SVG escala sin límite» es cierto, pero incompleto. La ilustración puede escalar sin límite mientras se vuelve costosa de almacenar, editar o renderizar. Nuestra guía de PNG frente a SVG explica la decisión general de formato, y qué significa vectorizar una imagen explica por qué las vectorizaciones convencionales favorecen formas frente a cuadrículas de píxeles.

Comprobaciones finales

Antes de entregar el archivo, compáralo con el original a tamaño nativo y al tamaño de salida previsto.

• Las dimensiones de la cuadrícula coinciden con el original.
• No se han introducido colores de franja por suavizado de bordes.
• Las celdas transparentes siguen transparentes.
• Las siluetas escalonadas están intactas en el método de conservación.
• Los bordes suavizados son intencionados en el método de contornos.
• Los huecos de un píxel, los ojos, los brillos y los huecos interiores siguen leyéndose correctamente.
• Las celdas repetidas del mismo color se simplifican solo donde la imagen sigue siendo idéntica.
• El SVG no incrusta por accidente el raster original. Si lo hace, puede seguir viéndose pixelado pese a la extensión del archivo.

El flujo más claro es el que nombra su compromiso. Conserva la cuadrícula cuando los píxeles sean la ilustración. Suaviza los contornos cuando quieras una nueva interpretación vectorial. Conserva el PNG cuando el vector no añada ningún control útil.

Fuentes

1. Adobe Illustrator — Crear bocetos y mosaicos — Comando Object Mosaic, teselas cuadradas, salida en color y requisito de raster incrustado.
2. MDN — CSS image-rendering — Renderizado de tipo vecino más próximo para pixel art en la web.
3. W3C — Especificación PNG, tercera edición — Modelo raster sin pérdidas de PNG y comportamiento del canal alfa.
4. W3C — Formas básicas SVG — Geometría de rectángulo utilizada para SVG literales de celdas de cuadrícula.
5. W3C — Sistemas de coordenadas SVG y viewBox — Correspondencia de un sistema de coordenadas de cuadrícula nativa con un área de visualización SVG.

Si quieres contornos suaves en lugar de una cuadrícula conservada, pasa la ilustración por PerfectVector y después compara la silueta, los huecos de un píxel y los detalles pequeños con el maestro de píxeles antes de utilizarla.