JPG a SVG: Conversión de Raster a Vector
Explicada

Raster vs Vector: La Diferencia Fundamental

Toda imagen digital pertenece a una de dos categorías: raster o vector. Entender la diferencia es esencial para saber qué puede y qué no puede hacer la vectorización.

Una imagen raster (JPG, PNG, BMP, TIFF) almacena una imagen como una cuadrícula rectangular de píxeles de colores. Cada píxel es un pequeño cuadrado con un único valor de color. El número total de píxeles — la resolución — determina cuánto detalle puede contener la imagen. Una foto de 3000×2000 píxeles contiene 6 millones de valores de color individuales. Al ampliar la imagen, eventualmente se ven los cuadrados individuales. Al escalarla más allá de su resolución nativa, el software debe inventar nuevos píxeles entre los existentes, produciendo un resultado borroso e interpolado.

Una imagen vectorial (SVG, AI, EPS, PDF) almacena una imagen como un conjunto de instrucciones matemáticas. Un círculo se describe como un punto central y un radio. Una curva es una ecuación de Bézier con puntos de control. Una región rellena es una ruta cerrada con un color de relleno. Dado que la imagen está definida por matemáticas en lugar de píxeles, puede renderizarse a cualquier resolución — desde un favicon de 16×16 hasta una valla publicitaria de 10 metros — con nitidez perfecta en todo momento. El motor de renderizado simplemente recalcula las curvas para el tamaño objetivo.

Esta diferencia fundamental significa que convertir de raster a vector no es como convertir WAV a MP3 o JPG a PNG. Esos son cambios de formato dentro del mismo modelo de datos (píxeles a píxeles, o muestras a muestras). La conversión de raster a vector es una reconstrucción — el software debe interpretar los datos de píxeles y construir una representación matemática completamente nueva de la imagen.

Cómo Funciona la Auto-Vectorización

Cuando subes una imagen JPG a CleverUtils y la conviertes a SVG, el archivo pasa por un pipeline de varios pasos. Entender cada paso ayuda a explicar por qué ciertas imágenes se vectorizan magníficamente mientras que otras producen resultados inesperados.

Paso 1: Conversión a Bitmap

La imagen de entrada (JPG, PNG o cualquier formato raster compatible) se convierte primero a un bitmap sin procesar usando ImageMagick. Este paso decodifica la imagen comprimida en una cuadrícula de píxeles sin comprimir que el algoritmo de trazado puede procesar. Cualquier característica específica del formato (artefactos de compresión JPEG, canales alfa PNG, metadatos EXIF) se elimina, dejando un bitmap limpio.

Paso 2: Umbralización (Escala de Grises a Binario)

Potrace, el motor de trazado, trabaja con imágenes bitonales (binarias) — cada píxel es negro o blanco. El bitmap en escala de grises se convierte a binario usando un umbral de brillo. El brillo de cada píxel se compara con el valor de umbral (de 0.0 a 1.0, predeterminado 0.5):

• Los píxeles más oscuros que el umbral se vuelven negros (primer plano)
• Los píxeles más claros que el umbral se vuelven blancos (fondo)

Este es el paso más crítico del pipeline. El umbral determina cuánto de la imagen original se captura como primer plano. Un umbral de 0.3 captura solo los elementos más oscuros; 0.7 captura la mayor parte de la imagen, produciendo una salida más densa.

Paso 3: Trazado de Bordes

Potrace escanea el bitmap binario e identifica límites entre regiones negras y blancas. Sigue estos límites píxel a píxel, construyendo un contorno sin procesar de cada forma. El algoritmo maneja formas anidadas (una región blanca dentro de una región negra dentro de otra región blanca) rastreando la jerarquía de relaciones interior/exterior.

Paso 4: Ajuste de Curvas de Bézier

Los contornos de píxeles sin procesar del Paso 3 son formas escalonadas dentadas. Potrace ajusta curvas de Bézier suaves a estos contornos, reemplazando los bordes escalonados con curvas matemáticas limpias. El algoritmo de ajuste de curvas minimiza el error entre el límite de píxeles original y la curva ajustada, manteniendo la descripción de la ruta compacta.

Dos parámetros controlan este proceso:

• Suavizado de esquinas (-a): Controla si las esquinas se representan como ángulos agudos o curvas suaves. Un valor de 0 conserva todas las esquinas; 1.334 suaviza todo.
• Optimización (-O): Controla cuán agresivamente potrace simplifica las curvas. Los valores más altos producen rutas más simples con menos puntos de control, pero potencialmente con un trazado menos preciso.

Paso 5: Salida SVG

Las curvas de Bézier ajustadas se escriben como elementos de ruta SVG — XML estándar que cualquier navegador, herramienta de diseño o máquina de corte puede renderizar. El pipeline de comandos completo se ve así:

Qué Se Vectoriza Bien

El paso de umbralización binaria es la clave para entender qué imágenes producen una salida SVG excelente. Las imágenes que se dividen naturalmente en regiones claras y oscuras bien definidas — con bordes fuertes y mínima gradación — se adaptan perfectamente al binario blanco/negro que procesa potrace.

El hilo común: alto contraste, bordes claros, rango tonal limitado. Si puedes entrecerrar los ojos ante la imagen y aún distinguir su forma esencial, se vectorizará bien.

Qué NO Se Vectoriza Bien

El mismo proceso de umbralización que funciona brillantemente para logos y arte lineal falla en imágenes con variación tonal continua. Cuando una imagen contiene millones de sutiles transiciones de color y brillo, forzar cada píxel a negro o blanco destruye la información visual que hace que la imagen tenga significado.

• Fotografías: Un retrato o paisaje contiene gradientes suaves en la piel, el cielo, el follaje y la tela. La umbralización colapsa todo esto en regiones de blanco y negro marcadas, produciendo una apariencia abstracta o posterizada. El archivo SVG también puede ser enorme — miles de pequeñas rutas que intentan representar lo que originalmente era una variación tonal suave.
• Escenas complejas: Las imágenes con muchos elementos superpuestos, profundidades variables y fondos complejos producen una salida vectorial ruidosa y desordenada con demasiadas rutas para ser útil.
• Gradientes suaves: Un cielo al atardecer, un degradado de color o un efecto de viñeta no pueden representarse como binario negro/blanco. El gradiente queda cortado en bandas discretas con límites dentados.
• Texturas detalladas: El tejido de tela, la veta de la madera, los poros de la piel, el pelaje — estas texturas de detalle fino generan enormes cantidades de pequeñas rutas vectoriales que ni se ven bien ni tienen ningún propósito práctico.
• Imágenes de baja resolución: Una miniatura de 100×100 píxeles le da al trazador tan pocos píxeles con los que trabajar que las curvas se vuelven toscas y en bloque. Una entrada de mayor resolución siempre produce una salida más suave.
• JPGs muy comprimidos: Los artefactos de compresión JPEG (patrones en bloque alrededor de los bordes) confunden la detección de bordes, produciendo rutas vectoriales ruidosas que trazan los artefactos de compresión en lugar del contenido real de la imagen.

Nuestro Pipeline de Potrace

CleverUtils usa potrace (Polygon Tracer), creado por Peter Selinger, para la conversión de raster a vector. Potrace es el mismo motor que usa la función "Trazar Bitmap" de Inkscape y está ampliamente considerado como el mejor trazador automático de código abierto disponible.

El pipeline de conversión tiene tres componentes:

1. ImageMagick convert — Decodifica el archivo de entrada (JPG, PNG, WebP, TIFF, PSD, etc.) y lo convierte a un bitmap BMP sin procesar que potrace puede procesar
2. Pipe (|) — Los datos BMP se transmiten directamente a potrace sin escribir un archivo temporal, manteniendo el proceso rápido y eficiente en memoria
3. potrace — Traza los contornos del bitmap y genera un archivo SVG con curvas de Bézier limpias

El comando completo:

convert input.jpg BMP:- | potrace -s --opaque -o output.svg

Esta configuración predeterminada usa un umbral de 0.5, suavizado de esquinas moderado y optimización estándar. Para la mayoría de logos, arte lineal y gráficos simples, los valores predeterminados producen una salida excelente sin necesidad de ajustar ningún parámetro.

Ajustes de Vectorización Explicados

Potrace ofrece varios parámetros que controlan la calidad y el carácter de la salida vectorial. Comprender estos ajustes te ayuda a obtener los mejores resultados para diferentes tipos de imágenes de origen.

Umbral (-k)

El parámetro más importante. Controla el punto de corte de brillo entre negro (primer plano) y blanco (fondo) en el paso de conversión binaria. Rango: 0.0 a 1.0, predeterminado 0.5.

Suavizado de Esquinas (-a)

Controla si el trazador conserva las esquinas agudas o las redondea en curvas. Rango: 0 a 1.334, predeterminado 1.

• -a 0 — Todas las esquinas son agudas. Bueno para formas geométricas, pixel art y diagramas técnicos donde se desean ángulos precisos.
• -a 1 (predeterminado) — Suavizado moderado. Las esquinas cercanas a 90 grados permanecen agudas; las demás se redondean.
• -a 1.334 — Suavizado máximo. Todas las esquinas se convierten en curvas. Produce la salida más suave, buena para formas orgánicas y escritura a mano.

Eliminación de Ruido (-t turdsize)

Elimina pequeñas motas aisladas de la imagen binaria antes de trazarla. El valor especifica el tamaño máximo (en píxeles) de las regiones a descartar. Predeterminado: 2.

• -t 0 — Conservar todo, incluido el ruido de un solo píxel. Úsalo solo para imágenes de origen muy limpias.
• -t 2 (predeterminado) — Elimina pequeñas motas (regiones de 1-2 píxeles). Funciona para la mayoría de imágenes.
• -t 10-50 — Elimina agresivamente las características pequeñas. Útil para documentos escaneados con polvo, textura de papel o artefactos de compresión.

Optimización (-O)

Controla cuántos segmentos de curva de Bézier usa potrace para aproximar cada contorno. Una mayor optimización produce rutas más simples (menos bytes SVG) pero potencialmente un trazado menos preciso. El nivel de optimización predeterminado es un buen equilibrio entre fidelidad y tamaño de archivo para la mayoría de las imágenes.

Cuándo Vectorizar

La vectorización no es una mejora universal — es la herramienta adecuada para casos de uso específicos donde las propiedades de los gráficos vectoriales proporcionan una ventaja clara sobre las imágenes raster.

Impresión en Gran Formato

Las pancartas, exhibiciones de ferias comerciales, envoltura de vehículos y señalización de edificios requieren material gráfico que pueda escalarse a metros sin perder calidad. Un logo diseñado a 300×200 píxeles se convierte en un desastre borroso en una pancarta de 3 metros. Convertirlo a SVG le da a la imprenta un archivo independiente de resolución que se renderiza nítidamente a cualquier escala.

Iconos y Elementos de UI Escalables

Los sitios web y las aplicaciones muestran iconos en muchos tamaños: 16px en menús, 32px en barras de herramientas, 64px en tarjetas de características, 128px en secciones destacadas. Servir un PNG separado para cada tamaño es un desperdicio. Un único icono SVG se renderiza perfectamente a cada tamaño, responde al estilo CSS (cambia colores al pasar el cursor) y normalmente pesa menos que una sola imagen PNG.

Dibujos Lineales Escaneados

Arquitectos, ingenieros y artistas suelen escanear bocetos dibujados a mano, planos o diagramas técnicos. El JPG escaneado es una captura raster de algo que originalmente se dibujó con líneas y curvas — exactamente lo que el formato vectorial representa de forma nativa. Vectorizar el escaneo reconstruye la intención original, produciendo rutas vectoriales limpias y editables a partir de los datos de píxeles escaneados.

Máquinas de Corte y CNC

Cricut, Silhouette, cortadoras láser y routers CNC requieren entrada vectorial para generar trayectorias de herramientas. Si tu diseño existe solo como JPG o PNG, la vectorización es el puente entre el diseño raster y la operación de corte físico. Las rutas vectoriales se convierten en las líneas exactas que sigue la máquina.

Bordado y Serigrafía

Las máquinas de bordar necesitan contornos vectoriales para generar trayectorias de puntadas. La serigrafía requiere separaciones vectoriales limpias para cada capa de color. En ambos casos, vectorizar un logo o diseño raster es el primer paso en el flujo de trabajo de producción.

Alternativas con Inteligencia Artificial

Potrace es un trazador algorítmico tradicional — detecta bordes y ajusta curvas usando optimización matemática. Sobresale en salida en blanco y negro de fuentes de alto contraste, y es rápido, gratuito y determinista (la misma entrada siempre produce la misma salida).

Para los casos de uso que potrace no puede manejar bien, los vectorizadores basados en IA ofrecen un enfoque diferente:

Herramientas como Vectorizer.AI y Recraft usan aprendizaje automático para identificar formas, separar capas de color y generar una salida SVG multicolor limpia a partir de imágenes complejas. Pueden manejar logos a todo color, ilustraciones con gradientes e incluso contenido fotográfico que potrace no puede.

Sin embargo, para los casos de uso de vectorización más comunes — convertir un logo en B&N, trazar un dibujo lineal, crear archivos de corte SVG para Cricut o vectorizar texto escaneado — potrace produce excelentes resultados de forma instantánea y gratuita. Sigue siendo el motor detrás de Trace Bitmap de Inkscape, una de las herramientas de vectorización más utilizadas en el mundo.

Consejos de Preprocesamiento para Mejores Resultados

La calidad de tu salida SVG depende en gran medida de la calidad de tu imagen de entrada. Unos minutos de preparación antes de subir pueden mejorar drásticamente el resultado de la vectorización.

• Aumenta el contraste: Abre la imagen en cualquier editor (incluso el editor integrado del teléfono) y sube el control deslizante de contraste. Un contraste más fuerte significa bordes más claros para que el trazador los siga.
• Recorta ajustadamente: Elimina el fondo innecesario. Menos píxeles irrelevantes significa una salida más limpia y archivos SVG más pequeños.
• Usa la resolución más alta disponible: Una imagen de 2000×2000 píxeles le da al trazador 4 veces más datos de borde que una versión de 1000×1000. Más píxeles significan curvas más suaves.
• Prefiere PNG sobre JPG cuando sea posible: La compresión JPEG crea artefactos en bloque alrededor de los bordes. Estos artefactos confunden al trazador, produciendo rutas vectoriales ruidosas. Si tienes ambos formatos disponibles, usa el PNG.
• Convierte a escala de grises primero: Si la imagen es naturalmente B&N (como un boceto o logo), convertirla explícitamente a escala de grises antes de subirla elimina cualquier ruido de color que pueda afectar la umbralización.
• Elimina el ruido de fondo: Para documentos escaneados, usa un ajuste de "niveles" o "curvas" para llevar el blanco del papel a blanco puro y la tinta a negro puro. Esto elimina la textura del papel y los artefactos de escaneo.