Convertir imagen a SVG — de PNG/JPG a vector
Vectorización de mapas de bits a SVG con controles de colores y detalle
Funciona en tu navegador · no se sube nada
La imagen se reduce a unos pocos colores y el contorno de cada zona de color se calca con líneas y curvas. Funciona bien con logotipos, iconos, rótulos y dibujos sencillos. Las fotos salen posterizadas y el archivo puede ser muy grande; los degradados y los bordes suaves no se pueden conservar tal cual.
Suelta una imagen para convertirla a SVG
Un JPG, PNG, WebP, GIF o BMP (de hasta 50 MB). También puedes pegarlo con Ctrl+V (⌘V en Mac). No se sube nada.
El número máximo de colores que puede usar el SVG. Prueba con 2–8 para logotipos y 16 o más para ilustraciones.
Cuanto más alto, más fielmente sigue los contornos y conserva las motas pequeñas, pero el archivo es más grande y tarda más. 1 es sencillo; 5 es lo más parecido al original.
Qué hace
Esta herramienta convierte un mapa de bits (PNG, JPG, WebP, GIF o BMP) en un vector SVG. Los mapas de bits son cuadrículas de píxeles y se pixelan al ampliarlos; un SVG guarda líneas y curvas, así que se ve nítido a cualquier tamaño. Es útil cuando se ha perdido el archivo original del logotipo y solo queda un PNG pequeño, cuando necesitas un icono para una web o un vector para corte láser, bordado o pegatinas.
Conoce antes sus límites. La imagen se reduce a unos pocos colores y se calca el contorno de cada zona de color, así que los degradados, los bordes suaves y la textura fotográfica no se pueden conservar tal cual. Cuanto más plano sea el dibujo, más limpio será el resultado.
Cómo se usa
- Suelta una imagen o haz clic en Elegir imagen. También puedes pegarla con Ctrl+V.
- Ajusta Colores: 2 para un logotipo en blanco y negro, de 4 a 8 para un logotipo con pocos colores y 16 o más para ilustraciones.
- Elige el Detalle de 1 a 5. Cuanto más alto, más fielmente sigue los contornos.
- Compara la vista previa con el original y haz clic en Guardar SVG o copia el código.
Cómo funciona
- Reducción de colores: cada píxel se asigna a colores de una paleta muestreada, que se refina en tres pasadas. La misma imagen con los mismos ajustes da siempre el mismo SVG.
- Vectorización: los bordes de las zonas de color se ajustan con rectas y curvas cuadráticas. El detalle 1 admite 4 px de error y descarta las formas de menos de 32 puntos de contorno; el detalle 5 sigue el borde con 0,25 px de margen y conserva las motas pequeñas.
- Tamaño de análisis: para ir más rápido, el lado largo se reduce a 300 px con detalle 1, a 700 px con detalle 3 y a 1400 px con detalle 5, y las coordenadas se vuelven a escalar al tamaño original.
- Limpieza: se eliminan las formas de colores totalmente transparentes y se fijan el ancho y alto originales y un viewBox.
- La vectorización usa imagetracerjs (dominio público).
Ejemplos
| Original | Ajustes | Resultado |
|---|---|---|
| Logotipo de letras negras en PNG, 800×300 | 2 colores, detalle 3 | Letras negras sobre blanco, archivo pequeño |
| Icono de cuatro colores en PNG, 512×512 | 4 colores, detalle 4 | 4 colores, curvas suaves |
| Foto de paisaje en JPG, 4000×3000 | 16 colores, detalle 2 | Aspecto de póster, archivo mucho más grande que un logotipo |
Para volver a pasar un vector a PNG, usa SVG a PNG; para un juego de iconos web, prueba el generador de favicon.
Preguntas frecuentes
¿Puedo convertir una foto a SVG?
Puedes, pero sale como unas pocas zonas de color plano, como un póster, y con mucho detalle el archivo puede llegar a varios megabytes. Las fotos están mejor en JPG o WebP; esta herramienta es para logotipos, iconos, rótulos y dibujos sencillos.
El resultado tiene muchas motas pequeñas.
Baja el detalle para eliminar las manchas pequeñas, y baja el número de colores para fusionar los parecidos. Si el original es un JPG con ruido, lo que más suele ayudar es usar entre 2 y 8 colores.
¿Se conserva el fondo transparente?
Sí. Las zonas totalmente transparentes no generan formas, así que quedan vacías en el SVG. Las zonas semitransparentes reciben la opacidad del color.
¿De qué tamaño es el SVG guardado?
Tiene el ancho y alto en píxeles de la imagen original más un viewBox, así que se escala sin problemas a cualquier tamaño en la web o en una app de diseño.
¿Se sube mi imagen?
No. El análisis y la vectorización se hacen dentro de tu navegador.
