¿Qué es la vectorización?
La vectorización (también llamada trazado) es el proceso de convertir una imagen raster —una cuadrícula de píxeles de colores— en una imagen vectorial —un conjunto de curvas y formas matemáticas. Las dos representaciones son fundamentalmente distintas:
- Raster (PNG, JPG, BMP): Cada píxel almacena un valor de color. La imagen tiene una resolución fija. Ampliarla más allá de esa resolución produce resultados borrosos e interpolados.
- Vector (SVG, AI, EPS): Las formas se definen mediante ecuaciones matemáticas —curvas Bézier, líneas, arcos. El motor de renderizado recalcula las matemáticas a cualquier tamaño objetivo, produciendo nitidez perfecta desde un favicon de 16 píxeles hasta una valla publicitaria de 10 metros.
La vectorización no es una simple conversión de formato como PNG a JPEG. Es una reconstrucción: el software analiza los límites de los píxeles, detecta bordes y construye una representación matemática completamente nueva que aproxima la imagen original. La calidad de esta aproximación depende en gran medida de las características de la imagen fuente.
Nuestra canalización de conversión
Cuando subes un PNG (o JPG, BMP, WebP, TIFF) a CleverUtils y lo conviertes a SVG, el archivo pasa por una canalización de varias etapas. Entender cada etapa explica por qué ciertas imágenes se vectorizan de forma excelente y otras producen resultados inesperados.
Etapa 1: Decodificación de entrada (ImageMagick)
El archivo subido es decodificado por ImageMagick, que admite prácticamente todos los formatos raster. La imagen se convierte a un mapa de bits BMP sin comprimir —una cuadrícula de píxeles sin artefactos de compresión, sin metadatos ni características específicas del formato. Esto garantiza que potrace reciba una entrada limpia y consistente independientemente del formato de archivo original.
Etapa 2: Binarización (umbralización)
Potrace trabaja exclusivamente con imágenes de dos tonos (binarias) —cada píxel es negro o blanco. El mapa de bits en escala de grises se convierte a binario usando un umbral de brillo. El brillo de cada píxel se compara con el valor umbral (0.0 a 1.0, por defecto 0.5):
- Los píxeles más oscuros que el umbral se convierten en negro (primer plano — se trazarán)
- Los píxeles más claros que el umbral se convierten en blanco (fondo — ignorados)
Para imágenes en color, potrace primero convierte a escala de grises usando la fórmula de luminancia (0.2126R + 0.7152G + 0.0722B) y luego aplica el umbral. Este es el paso más crítico — el umbral determina qué partes de la imagen se capturan en la salida vectorial.
Etapa 3: Trazado de bordes
Potrace escanea el mapa de bits binario e identifica los límites entre las regiones negras y blancas. Sigue estos límites píxel a píxel, construyendo contornos sin procesar de cada forma. El algoritmo gestiona correctamente las 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.
Etapa 4: Ajuste de curvas
Los contornos de píxeles sin procesar son formas escalonadas dentadas (porque los píxeles son cuadrados). Potrace ajusta curvas Bézier suaves a estos contornos, reemplazando los bordes escalonados con curvas matemáticas limpias. El algoritmo minimiza el error entre el límite de píxeles original y la curva ajustada, manteniendo la descripción del trazado compacta.
Etapa 5: Salida SVG
Las curvas ajustadas se escriben como elementos SVG <path> —XML estándar que cualquier navegador, herramienta de diseño o máquina de corte puede renderizar y manipular.
Comando completo de la canalización: convert input.png BMP:- | potrace -s --opaque -o output.svg
ImageMagick convierte la entrada a BMP y la canaliza directamente a potrace. El indicador -s solicita la salida SVG. --opaque rellena el fondo de blanco.
Qué se vectoriza bien
El paso de umbralización binaria es la clave para entender qué imágenes producen una excelente salida SVG. Las imágenes que se dividen de forma natural en regiones claras y oscuras con bordes definidos se adaptan perfectamente al modelo de procesamiento de potrace.
| Tipo de fuente | Calidad | Por qué funciona |
|---|---|---|
| Logotipos sobre fondo blanco | Excelente | Alto contraste, bordes limpios, colores sólidos de relleno |
| Arte lineal y bocetos | Excelente | Líneas fuertes de tinta/lápiz sobre papel blanco |
| Iconos (diseño plano) | Excelente | Formas geométricas, colores uniformes, límites limpios |
| Texto y tipografía | Excelente | Bordes nítidos, negro uniforme sobre blanco |
| Siluetas | Excelente | Blanco y negro puro, contornos limpios, sin detalle interno |
| Sellos y estampillas | Muy buena | Alto contraste, pero puede necesitar ajuste de umbral en zonas desvanecidas |
| Diagramas técnicos | Muy buena | Líneas limpias, pero las líneas muy finas pueden necesitar un umbral más bajo |
| Diseños dibujados a mano | Buena | Las líneas fuertes de tinta funcionan; los trazos suaves de lápiz pueden desaparecer |
El hilo conductor: alto contraste, bordes claros, rango tonal limitado. Si la imagen sigue siendo reconocible reducida a blanco y negro puro, se vectorizará bien.
Qué se vectoriza mal
La misma umbralización binaria que funciona brillantemente para logotipos y arte lineal falla con imágenes que tienen variación tonal continua. Cuando cada píxel tiene un valor de brillo único, forzarlos a todos en negro o blanco destruye la información visual que hace que la imagen tenga sentido.
- Fotografías: Los retratos, paisajes y fotos de productos contienen gradientes suaves en piel, cielo, follaje y tela. La umbralización los colapsa todo en manchas negras y blancas, produciendo un aspecto abstracto o posterizado. El archivo SVG también puede ser enorme —miles de trazados diminutos que intentan aproximar una variación tonal suave.
- Gradientes suaves: Los cielos al atardecer, los desvanecimientos de color, los efectos de viñeta y las sombras no pueden representarse en binario. El gradiente se divide en bandas discretas con límites dentados.
- Texturas complejas: El tejido, la veta de la madera, el pelaje, la textura del papel —generan grandes cantidades de trazados vectoriales diminutos que parecen ruidosos y no tienen ningún propósito práctico.
- Fuentes de baja resolución: Una miniatura de 100×100 píxeles proporciona tan pocos puntos de datos que el ajuste de curvas Bézier produce trazados toscos y angulares. La salida parece angulosa y burda independientemente del contenido fuente.
- JPEG con mucha compresión: La compresión JPEG crea artefactos de bloque de 8×8 píxeles alrededor de los bordes. Potrace traza estos artefactos de compresión en lugar de los bordes reales de la imagen, produciendo trazados vectoriales ruidosos y dentados.
Regla general: Si el significado esencial de la imagen sobrevive en blanco y negro puro —sin grises, sin gradientes—, se vectorizará bien. Si la imagen depende de la sutileza tonal o del detalle fotográfico, la vectorización no es el enfoque adecuado.
Consejos para optimizar la calidad
Las mejoras más grandes provienen de preparar la imagen fuente antes de subirla, no de ajustar los parámetros de potrace. Estos pasos funcionan en cualquier editor de imágenes.
Usa la resolución más alta disponible
Potrace ajusta curvas Bézier a los límites de los píxeles. Más píxeles significa más puntos de datos para el algoritmo de ajuste de curvas, lo que produce una salida más suave y precisa. Una imagen de 2000×2000 píxeles produce curvas notablemente mejores que una versión de 500×500 del mismo contenido. Sube siempre la versión más grande disponible —la salida SVG es independiente de la resolución, pero su calidad depende de la resolución de entrada.
Limpia la fuente
Para imágenes escaneadas, elimina el ruido de fondo y los artefactos antes de subir. Usa un ajuste de Niveles o Curvas para llevar el fondo hacia el blanco puro y el primer plano hacia el negro puro. Elimina manchas de polvo, la textura del papel y los artefactos de escaneo con un ligero desenfoque o filtro quitamanchas. Recorta ajustado para eliminar las sombras de los bordes.
Aumenta el contraste
Sube el control deslizante de contraste. Un contraste más fuerte significa una mayor diferencia entre los valores de brillo del primer plano y el fondo, lo que le da al umbral una separación más limpia con la que trabajar. Para imágenes en B&N, la entrada ideal tiene solo dos tonos: negro puro y blanco puro, sin nada intermedio.
Usa PNG, no JPEG
La compresión JPEG crea artefactos de bloque visibles alrededor de los bordes nítidos —exactamente las áreas que potrace analiza para el trazado de bordes. Estos artefactos producen trazados vectoriales dentados y ruidosos que trazan los límites de compresión en lugar de los bordes reales de la imagen. Si tienes la opción, usa siempre PNG. Si solo hay JPEG disponible, usa la versión de mayor calidad (menor compresión).
Ajusta el umbral
El umbral predeterminado de 0.5 funciona para la mayoría de las imágenes de alto contraste. Para fuentes de color claro (documentos desvanecidos, bocetos a lápiz suave), auméntalo a 0.6–0.7 para capturar más contenido. Para imágenes oscuras o pesadas donde el fondo recoge ruido no deseado, redúcelo a 0.3–0.4 para capturar solo los elementos más oscuros.
Configuración de potrace explicada
Además del umbral, potrace ofrece varios parámetros que afínan el carácter de la salida.
| Parámetro | Indicador | Rango | Predeterminado | Efecto |
|---|---|---|---|---|
| Umbral | -k |
0.0–1.0 | 0.5 | Corte de brillo para la conversión binaria. Más bajo = salida más clara, más alto = salida más densa |
| Suavizado de esquinas | -a |
0–1.334 | 1 | 0 = todas las esquinas agudas. 1.334 = suavizado máximo. Controla curva vs. ángulo en las esquinas. |
| Optimización | -O |
0–5 | 2 | Agresividad con la que se simplifican las curvas. Mayor = menos puntos, archivo más pequeño, menos precisión |
| Eliminación de ruido | -t |
0–100+ | 2 | Área máxima en píxeles de regiones aisladas a descartar. Mayor = elimina manchas más grandes |
Configuración recomendada por tipo de fuente
| Imagen fuente | Umbral | Esquinas | Turdsize | Notas |
|---|---|---|---|---|
| Logotipo B&N limpio | 0.5 | 1 (suave) | 2 | Los valores predeterminados funcionan perfectamente para logotipos de alto contraste |
| Boceto a lápiz | 0.35–0.45 | 1.334 (máx.) | 0 | Umbral más bajo evita la textura del papel; máximo suave para líneas fluidas |
| Sello / estampilla de tinta | 0.55–0.65 | 1 (suave) | 10–20 | Umbral más alto captura el sello completo; turdsize alto elimina salpicaduras |
| Documento escaneado | 0.5–0.6 | 0 (agudo) | 5–15 | Esquinas agudas para texto; eliminación moderada de ruido para polvo del papel |
| Fuente desvanecida / clara | 0.65–0.8 | 1 (suave) | 2–5 | Umbral más alto captura contenido perdido con 0.5 |
| Pixel art / código QR | 0.5 | 0 (agudo) | 0 | Esquinas agudas preservan la geometría; sin eliminación de ruido |
Vectorización multicolor
Potrace produce salida solo en blanco y negro. Convierte la imagen a una única capa binaria (primer plano negro, fondo blanco) y traza el límite. Esto es por diseño —potrace está optimizado para un trazado B&N limpio y preciso.
Para la vectorización multicolor, existen enfoques alternativos:
- Trazado de múltiples pasadas: Ejecuta potrace varias veces con diferentes niveles de umbral, cada uno capturando una banda de brillo diferente. Apila las capas SVG resultantes con diferentes colores de relleno. La función "Trace Bitmap" de Inkscape ofrece esto como "Multiple Scans: Brightness Steps".
- Cuantización de color + separación de capas: Reduce la imagen a una paleta de colores limitada (4–16 colores), separa cada color en una máscara binaria y traza cada máscara de forma independiente. Herramientas como "Multiple Scans: Colors" de Inkscape automatizan esto.
- Adobe Illustrator Image Trace: Trazado asistido por IA que maneja múltiples colores, gradientes y formas complejas. Produce una salida multicolor más limpia que el apilamiento de capas, pero requiere una suscripción de pago.
- Servicios basados en IA: Herramientas como Vectorizer.AI utilizan aprendizaje automático para identificar formas, separar colores y generar SVG multicolor limpio. Mejores resultados que los métodos algorítmicos para imágenes complejas, pero generalmente de pago por imagen.
Para los casos de uso de vectorización más comunes —conversión de logotipos, trazado de arte lineal, preparación de archivos de corte—, la salida B&N de potrace es exactamente lo que se necesita y se ejecuta al instante de forma gratuita.
Casos de uso prácticos
Escalado de logotipos
La razón más común para vectorizar: tu logotipo solo existe como un PNG o JPEG pequeño y lo necesitas en tamaños mucho más grandes para impresión, señalización o merchandising. Vectorizarlo convierte el raster de resolución fija en un SVG infinitamente escalable. La versión SVG se puede imprimir en una valla publicitaria, bordarse en un sombrero o mostrarse como favicon —todo desde el mismo archivo.
Iconos SVG para web
Si tienes un conjunto de iconos como archivos PNG, vectorizarlos a SVG proporciona independencia de resolución (nítidos en todas las pantallas), estilos CSS (cambia los colores al pasar el cursor o en modo oscuro), tamaños de archivo más pequeños y la posibilidad de incluirlos en línea en HTML para cero solicitudes HTTP adicionales.
Máquinas de corte (Cricut, Silhouette, láser)
Cricut, Silhouette y las cortadoras láser requieren archivos de entrada vectoriales para generar trayectorias de herramientas. La máquina sigue los trazados vectoriales exactamente —la cortadora o el láser traza las curvas matemáticas. Si tu diseño solo existe como PNG, la vectorización es el puente entre el diseño raster y la operación de corte física. Las imágenes fuente limpias y de alto contraste producen las mejores trayectorias de corte.
Bordado
Las máquinas de bordado necesitan contornos vectoriales para generar trayectorias de puntada. Las formas vectoriales determinan la dirección, densidad y patrones de relleno de la puntada. Vectorizar un logotipo PNG a SVG es normalmente el primer paso para crear un archivo de bordado (.PES, .DST, .EXP). Las formas simples con límites claros producen la salida de puntada más limpia.
Optimización del rendimiento web
Reemplazar iconos y logotipos PNG por SVG en un sitio web reduce el peso de la página (un solo SVG reemplaza múltiples PNG específicos de resolución), mejora la nitidez en pantallas Retina y permite la personalización basada en CSS. Un sitio web típico con 20 iconos puede ahorrar 200–400 KB al cambiar de PNG a SVG, mejorando directamente las puntuaciones de Core Web Vitals.
Impresión en gran formato
Las lonas para ferias, el rotulado de vehículos, la señalización de edificios y los stands de exposiciones requieren material gráfico que se renderice con nitidez a tamaños físicos medidos en metros. Las imágenes raster que se veían bien en pantalla se vuelven visiblemente borrosas en tamaños de impresión grandes. Vectorizar el diseño garantiza nitidez matemática a cualquier tamaño de salida que necesite la imprenta.