Vectorizador Imagen a SVG — Motor VTracer WASM, Format-Agnostic
Convierte cualquier imagen ráster (JPG vía ITU-T T.81, PNG vía W3C 2ª Edición / ISO/IEC 15948:2004, WebP vía RFC 9649 + RFC 6386 VP8, AVIF vía AOMedia spec, HEIC vía Safari 17+ nativo) a SVG (W3C SVG 1.1 Second Edition, Recommendation 16 de agosto de 2011) usando VTracer (visioncortex/vtracer, Rust, MIT-licensed open source), compilado a WebAssembly por este proyecto y ejecutado en un module Web Worker — tus archivos nunca salen del dispositivo, y la directiva CSP 'wasm-unsafe-eval' es el único permiso necesario. El decodificador HTMLImageElement del navegador maneja todo formato ráster soportado; VTracer traza entonces los píxeles decodificados. Cuatro presets por intención cubren los casos principales: **Logo** (limpieza agresiva de manchas, colores planos — ideal para logotipos e iconos), **Ilustración** (clustering de color equilibrado, curvas suaves — ideal para arte de estilo vectorial), **Foto** (máxima precisión de color, separación de capas más fina — una pintura vectorial detallada; más paths, archivo mayor) y **B/N** (trazado binario — ideal para arte lineal, bocetos y códigos QR). El trazado usa el modo de salida Spline de VTracer (splines Bezier cúbicas) y una estrategia de capas apiladas. La entrada se submuestrea a un máximo de 2048 px en el lado más largo antes de trazar, así que las fuentes de alta resolución se trazan con detalle completo. El algoritmo es determinista: la misma imagen de entrada con el mismo preset y sliders produce siempre el mismo SVG. El modo **Incrustar** envuelve el ráster original en un elemento SVG `<image>` a resolución completa con alfa preservada según el formato (PNG RGBA, WebP ALPH según RFC 9649 §2.7.1.2, AVIF auxiliary plane según ISO/IEC 23008-12 HEIF). Un contorno Sobel opcional (Sobel y Feldman 1968 SAIL) añade un contorno vectorial para flujos de corte/impresión — este contorno usa d3-contour internamente.
Cómo convertir una imagen a SVG
- Arrastra cualquier imagen ráster (JPG, PNG, WebP, AVIF, HEIC) a la herramienta o haz clic para seleccionarla. El navegador la decodifica a un array de píxeles RGB(A).
- Elige un preset por intención: Logo (colores planos, limpieza de manchas), Ilustración (equilibrado), Foto (máximo detalle — más paths, archivo mayor), B/N (contorno binario) o Incrustar (ráster original en envoltorio SVG).
- Ajusta los sliders avanzados si es necesario: Colores (precisión de color 1–8), Suavidad (umbral de redondeo de esquinas), Detalle (tamaño mínimo de mancha). La herramienta re-traza automáticamente al cambiar — sin botón Vectorizar.
- Para el modo Incrustar, activa opcionalmente el contorno Sobel y ajusta el umbral de magnitud de borde para añadir un contorno vectorial sobre el ráster.
- Descarga el SVG. El archivo original queda intacto — no se sube nada.
Casos de uso comunes
- Vectorizar una librería de iconos de formatos mezclados (JPG + PNG + WebP) en un set SVG usando el preset Logo — sin necesidad de convertir formatos antes.
- Convertir el escaneo o captura de pantalla de un logo a SVG editable usando el preset Logo o Ilustración para cortadoras láser, plotters de vinilo o editores vectoriales.
- Producir una pintura vectorial detallada desde una fotografía usando el preset Foto — útil para slots de sistema de diseño que esperan SVG.
- Generar SVG de arte lineal binario desde bocetos o códigos QR usando el preset B/N.
- Incrustar un ráster fotográfico (AVIF, HEIC, WebP) dentro de un entorno SVG-only usando el modo Incrustar — resolución completa y alfa preservada.
Preguntas frecuentes
¿Qué preset elijo?
Logo para logotipos, iconos y arte de color plano donde quieres paths limpios y compactos. Ilustración para dibujos de estilo vectorial y posters. Foto para fotografías donde quieres la salida vectorial más detallada — espera más paths y un archivo mayor. B/N para arte lineal, bocetos, sellos y códigos QR. Incrustar cuando necesitas el ráster original preservado píxel a píxel dentro de un SVG válido (útil para contextos SVG-only que aún necesitan contenido fotográfico), con un contorno vectorial opcional encima.
¿La salida es vectorización real?
Para los cuatro presets de trazado (Logo, Ilustración, Foto, B/N) sí — el SVG contiene elementos `<path>` reales con datos de spline Bezier cúbica que escalan sin pérdida a cualquier resolución y son editables en Inkscape, Illustrator o cualquier editor SVG. El modo Incrustar produce un SVG técnicamente válido pero el contenido es el ráster original dentro de un elemento `<image>` — escala vía viewBox pero el contenido en píxeles sigue ligado a la resolución.
¿Se sube mi archivo?
No. VTracer corre como módulo WASM dentro de un Web Worker en tu navegador — cero peticiones al servidor. La pestaña Network de DevTools no muestra subidas. El SVG se genera en memoria y se expone vía URL.createObjectURL.
¿El resultado depende del formato origen?
La pipeline de trazado es format-agnostic — VTracer corre sobre el array de píxeles decodificados sin importar si el origen era JPG, PNG, WebP, AVIF o HEIC. El modo Incrustar además preserva el alfa específico del formato (PNG RGBA, WebP ALPH, AVIF auxiliary plane) en el data URL del `<image>` SVG.
Vectorización format-agnostic — presets VTracer vs Incrustar: trade-offs
Imagen → SVG es format-agnostic en la entrada porque el HTMLImageElement del navegador decodifica todo formato ráster soportado (JPG, PNG, WebP, AVIF, HEIC si Safari 17+) al mismo array de píxeles RGB(A); VTracer traza ese array sin importar el formato origen. Los presets eligen trade-offs distintos: **Logo** aplica filtrado agresivo de manchas (el slider Detail controla el tamaño mínimo de mancha) y agrupa en pocas regiones de color plano — los paths de salida son limpios y compactos, ideales para logotipos e iconos de cualquier formato. **Ilustración** equilibra precisión de color y suavidad — el slider Smoothness (umbral de esquina) controla con qué agresividad se redondean las esquinas a curvas Bezier. **Foto** usa máxima precisión de color (el slider Colors, precisión de color 1–8) y separación de capas más fina, produciendo una pintura vectorial detallada de fotografías; el trade-off son más paths y un archivo mayor. **B/N** aplica trazado binario — el origen se reduce a dos valores antes de que VTracer corra, produciendo un SVG de contorno monócromo ideal para arte lineal, bocetos y sellos. El modo **Incrustar** es una categoría distinta: envuelve el ráster original dentro de un elemento SVG `<image>` a resolución completa con alfa preservada donde el formato la lleva (modo RGBA del PNG y chunk tRNS, chunk ALPH del WebP según RFC 9649 §2.7.1.2, plano alfa auxiliar del AVIF según ISO/IEC 23008-12 HEIF; JPG y HEIC son típicamente opacos). La superposición opcional de bordes Sobel (operador de gradiente isótropo 3×3, Sobel y Feldman 1968 Stanford SAIL) añade un contorno vectorial umbralizado a una magnitud de borde definida por el usuario — útil para flujos de pegatina / corte de vinilo.
- Motor VTracer WASM (visioncortex/vtracer, Rust, MIT) — autocompilado, vendorizado ~122 KB, corre en un module Web Worker
- Cuatro presets de trazado por intención: Logo, Ilustración, Foto, B/N (trazado binario)
- Modo Incrustar: envuelve el ráster original en SVG <image> a resolución completa, alfa preservada por formato
- Salida determinista: mismo input + preset + sliders = mismo SVG siempre
- Submuestreo a 2048 px antes de trazar — 5× el límite anterior de 400 px, maneja fuentes de alta resolución
- Sliders avanzados: Colores (precisión de color 1–8), Suavidad (umbral de esquina), Detalle (filtro de manchas)
- Salida SVG según W3C SVG 1.1 Second Edition (16 de agosto de 2011) — splines Bezier cúbicas, capas apiladas
- En el navegador vía Web Worker — los archivos nunca salen del dispositivo
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Fuentes (6)
- VisionCortex contributors (2025). VTracer — raster to vector graphics converter. github.com/visioncortex/vtracer (Rust crate vtracer 0.6, MIT OR Apache-2.0) — the tracing engine behind the Logo / Illustration / Photo / B&W presets; compiled to WebAssembly by this project (vendored build, runs in a module Web Worker), performs colour clustering and cubic Bezier spline fitting (Spline mode) with stacked layering.
- Bostock, M. (D3.js) (2024). d3-contour — compute contour polygons using marching squares. github.com/d3/d3-contour (ISC license, npm v4.0.2) — contour extraction used ONLY for the optional Sobel edge outline in the Embed preset; the main tracing presets run on VTracer instead.
- Sobel, I., & Feldman, G. M. (1968). A 3×3 Isotropic Gradient Operator for Image Processing. Stanford Artificial Intelligence Laboratory (SAIL) talk, 1968 (unpublished; documented in subsequent SAIL technical reports) — gradient operator for the optional edge outline in the Embed preset; produces an edge mask thresholded into a binary contour set traced by d3-contour.
- WHATWG (live). HTML Living Standard — HTMLImageElement decoding via the browser's image registry. html.spec.whatwg.org/#htmlimageelement — generic source decoding mechanism: any image format the browser natively decodes (JPG via ITU-T T.81, PNG via W3C 2nd Edition, WebP via RFC 9649 / RFC 6386, AVIF via AOMedia spec, HEIC via Safari 17+ native) loads into HTMLImageElement and reaches getImageData uniformly.
- W3C (SVG Working Group) (2011). Scalable Vector Graphics (SVG) 1.1 (Second Edition). W3C Recommendation 16 August 2011 (w3.org/TR/SVG11/) — target SVG container format; <path d='M…'> elements carry the traced polygons, <image> element carries the embedded raster in the Embed preset.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: getImageData(). html.spec.whatwg.org/#dom-context-2d-getimagedata + canvas section 4.12.5 — browser-side raster sampling: any decoded source bitmap → getImageData returns the pixel array transferred to the vectorize worker for tracing, format-agnostic.
Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.