Cómo Convertir JPG a SVG en 3 Pasos
- Sube el JPG en el conversor de arriba (hasta 100 MB).
- Convierte. La imagen se traza a todo color con vtracer. Las imágenes de más de 1.200 px de ancho se reducen primero a 1.200 px.
- Descarga el SVG y ábrelo en Inkscape, Illustrator, Figma o Cricut Design Space para eliminar formas sueltas o cambiar sus colores.
Los logos, iconos y clip art con pocos colores planos dan el resultado más limpio. Las fotos salen posterizadas.
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. Nuestra comparación entre SVG y PNG muestra cuándo conviene cada formato.
| Propiedad | Raster (JPG, PNG) | Vector (SVG) |
|---|---|---|
| Modelo de datos | Cuadrícula de píxeles de colores | Rutas y curvas matemáticas |
| Escalado | Se degrada al ampliar | Escalable infinitamente, siempre nítido |
| Tamaño de archivo | Proporcional al número de píxeles | Proporcional a la complejidad de las rutas |
| Ideal para | Fotografías, escenas complejas | Logos, iconos, ilustraciones, arte lineal |
| Edición | A nivel de píxel (Photoshop, GIMP) | A nivel de ruta (Illustrator, Inkscape) |
| Transparencia | PNG sí, JPG no | Soporte completo |
| Animación | No de forma nativa | CSS y JavaScript |
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: Decodificación y Redimensionado
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.
Paso 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.
Paso 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.
Paso 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 de Bézier. Los giros de más de 60° se conservan como esquinas. Los polígonos mantienen nítidos los logos y las letras; las formas redondas se ven ligeramente facetadas si haces mucho zoom.
Paso 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. Para preparar la imagen de origen y limpiar el resultado, consulta cómo vectorizar una imagen paso a paso.
| Tipo de Imagen | Calidad | Por Qué |
|---|---|---|
| Logos sobre fondo blanco | Excelente | Alto contraste, bordes limpios, colores sólidos |
| Arte lineal y bocetos | Excelente | Líneas negras fuertes sobre papel blanco |
| Texto y tipografía | Excelente | Bordes nítidos, color uniforme |
| Siluetas | Excelente | Puro negro/blanco, contornos limpios |
| Iconos simples | Excelente | Formas geométricas, rellenos sólidos |
| Sellos y lacres | Muy buena | Alto contraste, puede requerir ajuste de umbral |
| Diseños dibujados a mano | Muy buena | Las líneas fuertes se vectorizan bien; los trazos de lápiz ligeros pueden desaparecer |
| Diagramas técnicos | Muy buena | Líneas limpias, pero las líneas finas pueden requerir un umbral más bajo |
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
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: Un retrato o paisaje contiene gradientes suaves en la piel, el cielo, el follaje y la tela. El trazado convierte todo esto en cientos de manchas de color plano, produciendo una apariencia 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 quedan cortados en bandas discretas de color plano 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 produce una salida más suave, hasta los 1.200 px de ancho con los que traza el conversor.
- 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.
Regla general: Si la imagen se sigue entendiendo bien al reducirla a un puñado de colores planos, se vectorizará bien. Si la imagen depende de gradientes, sutileza tonal o detalle fotográfico, la vectorización es la herramienta equivocada.
Nuestro Pipeline de Trazado (vtracer)
CleverUtils traza las imágenes raster con vtracer, un trazador en color de código abierto de VisionCortex. A diferencia de potrace, que solo produce blanco y negro, vtracer conserva los colores de la imagen.
El pipeline de conversión tiene tres componentes:
- ImageMagick — Decodifica el archivo de entrada (JPG, PNG, WebP, TIFF, PSD, etc.), corrige la rotación y reduce a 1.200 px las imágenes de más de 1.200 px de ancho
- vtracer — Agrupa los colores y traza cada región como una ruta poligonal rellena
- potrace — Alternativa para los archivos que vtracer no puede procesar; genera un SVG en blanco y negro con curvas de Bézier
El comando completo:
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
No hay ajustes que elegir: se usan los mismos parámetros para todos los archivos. Son adecuados para logos, iconos, clip art e ilustraciones planas.
Ajustes de Vectorización Explicados
Si trazas una imagen tú mismo con potrace (por ejemplo, con Vectorizar mapa de bits de Inkscape), estos parámetros controlan el resultado. El conversor de esta página no los usa: ejecuta vtracer con ajustes fijos.
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. Nuestra guía de ajustes de umbral de potrace muestra qué valores van mejor para logos, bocetos y escaneos.
| Umbral | Efecto | Ideal Para |
|---|---|---|
| 0.2 | Muy ligero — solo los píxeles más oscuros se convierten en primer plano | Imágenes oscuras, dibujos con tinta gruesa |
| 0.3 | Sensación de boceto ligero | Dibujos a lápiz, fuentes de bajo contraste |
| 0.5 | Predeterminado equilibrado — división equitativa | La mayoría de logos y arte lineal |
| 0.7 | Más denso — captura más de la imagen | Fuentes de colores claros, documentos desvanecidos |
| 0.9 | Muy denso — casi todo se convierte en primer plano | Extraer marcas tenues de fondos claros |
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
vtracer y potrace son trazadores algorítmicos: detectan bordes y ajustan formas con reglas fijas. Son rápidos, gratuitos y deterministas (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:
| Característica | Algorítmico (vtracer, potrace) | Vectorizadores con IA |
|---|---|---|
| Salida en color | vtracer: color; potrace: blanco y negro | Multicolor completo |
| Velocidad | Rápido (segundos o menos) | Segundos a minutos |
| Costo | Gratuito | Generalmente de pago (por imagen o suscripción) |
| Ideal para | Logos, arte lineal, gráficos B&N, corte | Ilustraciones multicolor, fotos estilizadas |
| Determinista | Sí — misma entrada, misma salida | Puede variar entre ejecuciones |
| Uso sin conexión | Sí (ambos son de código abierto) | Generalmente solo en la nube |
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.
Para los casos más comunes — un logo de colores planos, un dibujo lineal, un archivo de corte para Cricut o un texto escaneado — el trazado algorítmico da buenos resultados de forma rápida y gratuita. Potrace es además el motor detrás de Vectorizar mapa de bits de Inkscape.
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 una imagen nítida de unos 1.200 px de ancho: el conversor reduce a 1.200 px las imágenes más anchas, y las imágenes mucho más pequeñas dan bordes más toscos.
- 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 a escala de grises antes de subirla elimina el ruido de color, de modo que el trazador crea menos manchas de color sueltas.
- 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.
Otras Formas de Convertir JPG a SVG
Inkscape (gratis)
- Abre el JPG con Archivo → Abrir y selecciónalo.
- Ve a Trayecto → Vectorizar mapa de bits (Shift+Alt+B).
- Elige Escaneo único (Corte de luminosidad) para blanco y negro o Escaneos múltiples (Colores) para color, y haz clic en Aplicar.
- Elimina el mapa de bits original que queda debajo y guarda con Archivo → Guardar como → SVG simple.
Adobe Illustrator
- Coloca el JPG y selecciónalo.
- Abre Ventana → Calco de imagen y elige un ajuste preestablecido como Logotipo en blanco y negro o 6 colores.
- Haz clic en Expandir para convertir el calco en trazados editables y después usa Archivo → Exportar → Exportar como → SVG.
Cricut Design Space
Design Space puede subir un JPG y trazarlo por sí mismo como imagen de corte. Convertirlo antes a SVG te da capas de color separadas y más control sobre qué partes se cortan.