Cómo vectorizar una imagen en 3 pasos
- Sube la imagen (PNG, JPG, WebP, BMP o TIFF) en el conversor de arriba.
- Convierte. vtracer la traza a todo color; las imágenes de más de 1.200 px de ancho se reducen primero a 1.200 px.
- Descarga el SVG y retócalo en Inkscape, Illustrator o Figma: elimina motas sueltas, combina formas y cambia colores.
También funciona en el teléfono: abre la página en el navegador del móvil y sube la imagen.
¿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 y redimensionado (ImageMagick)
ImageMagick decodifica el archivo subido (JPG, PNG, WebP, TIFF, PSD y otros formatos) y corrige la rotación EXIF. Las imágenes de más de 1.200 px de ancho se reducen a 1.200 px para que el trazado sea rápido. Las entradas vectoriales o con capas, como PDF, EPS o PSD, se aplanan primero sobre fondo blanco.
Etapa 2: Agrupación de colores
El trazador, vtracer, agrupa en regiones los píxeles vecinos de color similar. Nuestros ajustes conservan 6 bits de precisión por canal de color, de modo que los tonos muy parecidos se fusionan en un único color plano. Por eso los degradados se convierten en bandas de color sólido.
Las manchas de menos de 4 píxeles se descartan como motas.
Etapa 3: Trazado de bordes
vtracer sigue el contorno de cada región de color. Las regiones se apilan: las formas más grandes quedan debajo y las más pequeñas encima, así que no hay huecos entre colores vecinos.
Etapa 4: Ajuste de polígonos
Nuestro conversor ejecuta vtracer en modo polígono: cada contorno se convierte en una cadena de segmentos rectos, no en curvas Bézier. Los giros de más de 60° se conservan como esquinas. Los polígonos mantienen nítidos los logotipos y las letras; las formas redondas se ven ligeramente facetadas si haces mucho zoom.
Etapa 5: Salida SVG
Cada región se escribe como un <path> SVG con un color de relleno sólido. El archivo se abre en cualquier navegador y en Inkscape, Illustrator, Figma y Cricut Design Space.
Comando: vtracer --input in.png --output out.svg --colormode color --hierarchical stacked --mode polygon --filter_speckle 4 --color_precision 6 --corner_threshold 60 --segment_length 3.5
Si vtracer no puede procesar un archivo, el conversor recurre a potrace, que genera un SVG en blanco y negro.
Qué se vectoriza bien
El trazado funciona mejor cuando una imagen está formada por unos pocos colores planos con bordes claros. Cada color plano se convierte en una forma limpia.
| 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 agrupación de colores falla en imágenes con variación tonal continua. Los degradados suaves se dividen en muchas bandas de color plano, lo que da un aspecto posterizado y hace que el SVG sea pesado.
- Fotografías: Los retratos, paisajes y fotos de productos contienen gradientes suaves en piel, cielo, follaje y tela. El trazado lo convierte todo en cientos de manchas de color plano, produciendo un aspecto 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 se dividen en bandas discretas de color plano 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. El trazador sigue estos artefactos de compresión en lugar de los bordes reales de la imagen, produciendo trazados vectoriales ruidosos y dentados.
Regla general: Si la imagen se sigue entendiendo bien al reducirla a un puñado de colores planos, se vectorizará bien. Si 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
Más píxeles dan al trazador más información de bordes y contornos más suaves, hasta cierto punto: el conversor de esta página reduce a 1.200 px las imágenes de más de 1.200 px de ancho antes de trazarlas. Una imagen nítida de aproximadamente ese ancho da el mejor resultado; una miniatura de 100 px da trazados toscos y en bloque.
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 conversor de esta página traza en color y no tiene umbral. Si trazas en blanco y negro con potrace o Inkscape, empieza con 0.5; súbelo a 0.6–0.7 para fuentes desvaídas o claras, o bájalo a 0.3–0.4 cuando el fondo recoja ruido.
Configuración de potrace explicada
Cuando trazas en blanco y negro con potrace (directamente o a través de Inkscape), estos parámetros determinan la salida. El conversor de esta página, en cambio, ejecuta vtracer con ajustes fijos.
| 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 o más | 0.2 | Tolerancia de optimización de curvas. Mayor = menos segmentos, 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: una única capa binaria, trazada en su límite. El conversor de esta página evita esa limitación usando vtracer, que agrupa los colores y traza cada región de color en una sola pasada.
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.
Cómo vectorizar una imagen en Inkscape e Illustrator
Inkscape (gratis)
- Importa la imagen (Archivo → Importar) y selecciónala.
- Abre Trayecto → Vectorizar mapa de bits (Shift+Alt+B).
- Elige Corte de luminosidad para un color o Escaneos múltiples → Colores para varios, y haz clic en Aplicar.
- Aparta el trazado, elimina el mapa de bits y guarda como SVG simple.
Adobe Illustrator
- Selecciona la imagen colocada y abre Ventana → Calco de imagen.
- Elige un ajuste preestablecido (Logotipo en blanco y negro, 6 colores, Fotografía de alta fidelidad) y ajusta el Umbral o los Colores.
- Haz clic en Expandir para obtener trazados editables y después exporta con Archivo → Exportar → Exportar como → SVG.
El trazado automático es gratuito. Contratar a un diseñador para redibujar un logotipo a mano cuesta más, pero da el resultado más limpio con fuentes complejas o de baja calidad.