CASO DE ESTUDIO · 03
SVGify: convierte cualquier imagen en un SVG editable
Un vectorizador gratuito y de código abierto. Funciona completamente en tu navegador: no se sube ni se guarda nada. Importas un PNG, JPG o WEBP, ajustas colores y formas y descargas un SVG limpio, listo para tu web.
- ROL
- Diseño y desarrollo completo
- TIPO
- Herramienta web · Código abierto
- TECNOLOGÍAS
- Next.js 16 · React 19 · TypeScript · imagetracerjs · SVGO · Web Workers
- ESTADO
- En vivo · 2026
EL PROBLEMA
Muchos logos e iconos solo existen como imagen. Convertirlos a SVG suele exigir programas de pago o deja archivos pesados, llenos de capas difíciles de editar.
EL OBJETIVO
Que cualquier persona, sepa o no de SVG, pueda pasar de una imagen a un vector limpio y editable en una sola sesión, desde el navegador.
PROCESO
Importar, vectorizar, editar y exportar
- 01
Importar
Arrastras una imagen. Si tiene fondo, la herramienta puede quitarlo antes de vectorizar.
- 02
Vectorizar
La conversión corre en un Web Worker, así la interfaz no se congela, y la vista previa se actualiza mientras ajustas.
- 03
Editar
Cambias colores por forma o por paleta, etiquetas trazos y limpias detalles.
- 04
Exportar
El SVG pasa por una limpieza propia y por SVGO antes de descargarse.
DECISIONES TÉCNICAS
Lo que pasa detrás de la interfaz
El archivo que entrega el vectorizador es pesado. Estas decisiones lo dejan listo para producción.
// lib/optimizeSvg.ts: limpia la salida de imagetracerjs sin tocar la geometría
function compressPathData(d: string): string {
return d
.replace(/\s+/g, ' ')
.replace(/\s*([MLCQAZHVSTmlcqazhvst])\s*/g, '$1')
.replace(/(\d)\s+(-)/g, '$1$2')
.trim();
}
function minifyRgbColors(svg: string): string {
return svg.replace(/(fill|stroke)="rgb\((\d+),\s*(\d+),\s*(\d+)\)"/g, (_full, attr, r, g, b) => {
const [rr, gg, bb] = [r, g, b].map((v) => toHexByte(Number(v)));
const canShorten = rr[0] === rr[1] && gg[0] === gg[1] && bb[0] === bb[1];
return `${attr}="${canShorten ? `#${rr[0]}${gg[0]}${bb[0]}` : `#${rr}${gg}${bb}`}"`;
});
}Vectorización en segundo plano
imagetracerjs corre en un Web Worker para que la página siga respondiendo con imágenes grandes.
Limpieza antes de SVGO
Se compactan los trazos y los colores RGB pasan a hexadecimal corto, sin cambiar cómo se ve el dibujo.
Sin huecos entre formas
Un trazo fino del mismo color sella las líneas que a veces aparecen entre formas vecinas.
Bilingüe y probado
Interfaz en español e inglés, con más de 160 tests en Vitest sobre la lógica de vectorización y edición.
LA SOLUCIÓN
Así funciona
Sube tu imagen
Arrastras un PNG, JPG o WEBP de hasta 10 MB, o pruebas con un icono de ejemplo. Ajustas la cantidad de colores y el suavizado y ves el resultado al instante.
Edita colores y formas
Recoloreas trazos sueltos o toda la paleta, y refinas los detalles.
Descarga un SVG limpio
Un archivo optimizado que puedes usar directo como icono, logo o ilustración.
RESULTADO
En números
Tests automáticos
Vectorización, edición de trazos y exportación cubiertas con Vitest.
Archivos subidos
Todo pasa en tu navegador: no se sube ni se guarda nada.
Código abierto
Gratis para usar y modificar.
LO QUE APRENDÍ
La promesa de la interfaz tiene que coincidir con el archivo que te llevas.
Mover el trabajo pesado a un Web Worker fue la diferencia entre una herramienta que se congela y una que responde mientras ajustas.
Mostrar los controles avanzados solo cuando hacen falta permite que la herramienta sirva tanto a quien empieza como a quien ya sabe de SVG.