Trazador de Imagen a SVG

El Trazador de Imagen a SVG convierte un archivo PNG, JPG o cualquier otro mapa de bits rasterizado en un vector SVG limpio e infinitamente escalable. A diferencia de los trazadores del lado del servidor que suben su archivo o los SVG "falsos" que solo incrustan un mapa de bits en base64, esta herramienta se ejecuta completamente en su navegador: cuantiza la imagen en capas de color y vuelve a trazar el contorno de cada capa en trazados vectoriales reales mediante una combinación de seguimiento de bordes, simplificación de Ramer-Douglas-Peucker y suavizado de esquinas de Chaikin. Arrastre un logotipo, un icono, un boceto o una foto, observe cómo la vista previa lado a lado se reconstruye en tiempo real, luego copie el marcado SVG o descargue un archivo .svg que puede editar en Figma, Illustrator o Inkscape.

Qué hace diferente a este trazador

Cómo funciona (Pipeline de 5 etapas)

Cómo usar

1. Cargue un mapa de bits. Arrastre un archivo PNG/JPG a la zona de caída, haga clic para examinar, pegue desde el portapapeles (Ctrl+V) o haga clic en cualquiera de las muestras integradas para ver el trazador en acción.
2. Elija un ajuste preestablecido. Logotipo para marcas de 2 a 4 colores, Silueta para formas recortadas, Boceto de líneas para arte dibujado a mano, Póster de fotos para fotos posterizadas, Arte detallado para matices de salida de 10 colores.
3. Ajuste los controles deslizantes. Capas de color controla cuántos colores distintos conserva el trazador. Suavizado redondea las escaleras de píxeles. Simplificación contrae los tramos rectos largos (menor = más detalle, mayor = archivo más pequeño). Resolución de trazo establece la anchura de trabajo interna.
4. Copie o descargue. Use Copiar SVG para obtener el marcado sin procesar, Descargar .svg para obtener un archivo vectorial ejecutable o Descargar .png para renderizar el SVG limpio de nuevo en un mapa de bits de alta resolución.

Consejos para el trazado más limpio

• Comience con imágenes de alto contraste. Los fondos sólidos y los bordes nítidos se trazan mucho mejor que las fotos llenas de degradados.
• Use el ajuste preestablecido adecuado para el trabajo. El ajuste Logotipo predeterminado asume 3 colores planos; se verá extraño en una foto. Cambie a Póster de fotos o Arte detallado para imágenes naturales.
• Aumente primero la simplificación y luego el suavizado. La simplificación elimina puntos; el suavizado suaviza lo que queda. Hacerlo en ese orden mantiene el resultado pequeño Y suave.
• Reduzca la resolución de trazo para los logotipos. 240 px es más que suficiente para un icono; aumentar este valor solo produce trazados con más ruido.
• Active la opción Fondo transparente si desea colocar el SVG en un diseño coloreado. De lo contrario, el trazador rellenará el fondo con blanco.
• Para bocetos, use el modo Bordes. Este ejecuta primero un filtro Sobel y traza el mapa de bordes resultante, lo cual es fantástico para arte de líneas y dibujos a lápiz.

Dónde destacan los SVG trazados

Los logotipos e iconos vectoriales se mantienen nítidos en cualquier tamaño de pantalla y DPI, desde un favicon de 16×16 hasta un banner principal en 4K. Los SVG trazados también son la entrada perfecta para ediciones posteriores: abra el archivo en Figma, Adobe Illustrator o Inkscape y podrá cambiar el color, cambiar la forma o animar cualquier trazado individual. El SVG es también un formato web de primer nivel: pegue el marcado directamente en el HTML para evitar una solicitud de red adicional, colóquelo en el CSS como un background-image mediante un URI data:, o anime los contornos de los trazados con stroke-dasharray para conseguir ese efecto de escritura dibujada a mano.

Antecedentes del algoritmo

El trazador clásico de referencia por excelencia es Potrace (Peter Selinger, 2003), que utiliza etapas de ajuste de polígonos y optimización de curvas para producir trazados Bezier notablemente suaves. Un port completo de Potrace ocupa varios miles de líneas, por lo que esta herramienta utiliza un pipeline más ligero e igualmente bien comprendido: seguimiento de límites del vecindario de Moore para la extracción de contornos, Ramer-Douglas-Peucker (también llamado algoritmo de Douglas-Peucker) para la simplificación de trazados, y el algoritmo de corte de esquinas de Chaikin para el suavizado. Cada etapa es O(n) respecto a la longitud del trazado, por lo que todo el trazador termina una imagen típica de 240 px en mucho menos de un segundo.

Privacidad y seguridad

Todo se ejecuta de forma local. El elemento <input type="file"> lee su archivo directamente en el navegador, la API Canvas extrae los datos de los píxeles en su dispositivo y el trazador JavaScript nunca realiza una solicitud de red con su imagen. Puede confirmar esto abriendo las DevTools → Red y observando mientras realiza el trazado: no aparece tráfico de subida. Eso hace que la herramienta sea segura para logotipos patentados, activos de marca no publicados y fotos personales.

Preguntas frecuentes

¿Se sube mi imagen a su servidor?

No. El Trazador de Imagen a SVG es 100% del lado del cliente. Su mapa de bits se lee en el navegador, se procesa con la API Canvas, se traza con JavaScript puro y nunca se envía a través de la red. Desconecte su Wi-Fi y el trazador seguirá funcionando.

¿Qué formatos de imagen puedo trazar?

Cualquier formato rasterizado que su navegador pueda renderizar: PNG, JPG, GIF (primer fotograma), WebP y BMP. También puede trazar un SVG existente (primero se rasterizará), lo cual es útil para simplificar vectores complejos o volver a cuantizar sus colores.

¿Con qué ajuste preestablecido debería empezar?

Para logotipos e iconos de colores sólidos, use el ajuste preestablecido Logotipo. Para recortes puros en blanco y negro, use Silueta. Para dibujos y arte de líneas, use Boceto de líneas. Para fotos, use Póster de fotos o Arte detallado. Luego mueva ligeramente los controles deslizantes: la vista previa en vivo hace evidente lo que hace cada control.

¿Por qué mi SVG trazado se ve pixelado o pixeloso?

Aumente el control deslizante de Suavizado para redondear las esquinas afiladas de los píxeles y aumente el control deslizante de Simplificación para contraer tramos rectos largos. Una mayor Resolución de trazo también captura más detalles antes del trazado, lo que ofrece contornos más finos.

¿Puedo editar el SVG trazado después?

Sí. La salida es marcado SVG simple con un <path> por capa de color (o uno por silueta en el modo mono/bordes). Ábralo en Inkscape, Illustrator, Affinity Designer, Figma o cualquier editor de texto para cambiar el color, cambiar la forma o animar trazados individuales. Los trazados se enumeran en orden de renderizado (los más claros primero), por lo que el panel de capas en cualquier editor vectorial coincidirá.

¿Qué tan grande puede ser mi imagen de entrada?

De cualquier tamaño, pero el trazador remuestrea internamente su mapa de bits a la Resolución de trazo elegida (64–512 px). Ir más alto captura detalles más finos a costa de un mayor tamaño de archivo SVG. Para la mayoría de los logotipos, entre 200 y 300 px es el punto ideal; para fotos detalladas, pruebe con 400–512 px.

¿Se verá el SVG trazado exactamente como el mapa de bits?

Cerca, pero nunca perfectamente idéntico: esa es la contrapartida de la vectorización. La posterización a N colores descarta necesariamente los degradados, y la simplificación de trazados elimina características diminutas. Para activos críticos de marca, siempre debe comenzar desde un archivo vectorial original si existe; esta herramienta es para situaciones en las que solo se dispone de un mapa de bits y se necesita una versión vectorial utilizable del mismo.

¿Puedo usar comercialmente el SVG trazado?

El trazador no añade ninguna marca de agua, ni atribución, ni análisis a la salida. El hecho de que pueda usar el resultado comercialmente depende de los derechos que posea sobre el mapa de bits original; trazar el logotipo de otra persona no le transfiere la propiedad del mismo. Úselo en activos que haya creado o que tenga licencia para vectorizar.