JPG se vectoriza a SVG trazando regiones de color — un logo típico se reduce 5-10× (50 KB → 5 KB). Funciona bien con logos, iconos e imágenes posterizadas; las fotos crudas pierden detalle porque la cuadrícula raster no se mapea limpiamente a curvas escalables. La salida es XML editable, escala sin pérdida.
Comparativa JPG vs SVG
| Propiedad | JPG | SVG |
|---|---|---|
| Tipo de formato | Raster (cuadrícula de píxeles) | Vector (paths XML) |
| Escalable a cualquier tamaño | No (borroso al ampliar) | Sí (zoom infinito sin pérdida) |
| Foto típica | 50-80 KB | 200 KB+ (pierde detalle fino) |
| Logo típico | 30-50 KB | 1-10 KB (mucho menor) |
| Editable en editor de texto | No (DCT binario) | Sí (XML legible) |
| Año de introducción | 1992 (ISO 10918) | 2001 (W3C SVG 1.0) |
| Soporte navegador | Universal (~100%) | Universal (~100%) |
| Ideal para | Fotos, imágenes reales | Logos, iconos, diagramas |
| Animación | No | Sí (SMIL + CSS + JS) |
| CSS/JS interactivo | No | Sí (direccionable vía DOM) |
| Profundidad de color | 8 bits/canal | 24-bit + gradientes + filtros |
| Método de conversión | Compresión directa | Trazado + posterización |
Vectorizador JPG a SVG — VTracer WASM, Maneja Fotos con Honestidad
Convierte fotografías JPG a SVG (W3C SVG 1.1 Second Edition, Recommendation 16 de agosto de 2011) usando VTracer (visioncortex/vtracer, Rust, MIT-licensed), compilado a WebAssembly por este proyecto y ejecutado en un module Web Worker — tus archivos nunca salen del dispositivo. JPG a SVG es fundamentalmente difícil porque las fotografías JPG tienen variación continua de color por píxel, mientras que SVG representa regiones discretas. La estrategia de capas apiladas de VTracer maneja fuentes de alta resolución (hasta 2048 px en el lado más largo) con un resultado determinista y reproducible. Cuatro presets por intención: **Logo** (limpieza agresiva de manchas, colores planos — ideal para escaneos JPG de logotipos e iconos), **Ilustración** (clustering de color equilibrado, curvas suaves — ideal para arte de color plano guardado como JPG), **Foto** (máxima precisión de color, separación de capas más fina — la salida vectorial más detallada para contenido fotográfico; espera más paths y un archivo mayor) y **B/N** (trazado binario — convierte el JPG en un contorno monocromo, ideal para arte lineal o contenido de alto contraste). Para JPGs fotográficos donde la fidelidad visual importa más que la vectorización real, el modo **Incrustar** envuelve el ráster original en un elemento SVG `<image>` (técnicamente un archivo vectorial — escala vía viewBox — preservando el contenido píxel a píxel). Un contorno Sobel opcional (Sobel y Feldman 1968 SAIL) añade un contorno vectorial para flujos de corte/impresión.
Cómo convertir JPG a SVG
- Arrastra un .jpg a la herramienta o haz clic para seleccionarlo. El navegador decodifica el JPG (ITU-T T.81) a un array de píxeles RGB.
- Elige un preset: Logo (colores planos, limpieza de manchas — ideal para escaneos JPG de iconos o logos), Ilustración (equilibrado), Foto (máximo detalle — más paths, archivo mayor, más cercano a la foto original), B/N (contorno monocromo binario) o Incrustar (ráster original en envoltorio SVG — lo mejor para contenido fotográfico).
- Ajusta los sliders avanzados si es necesario: Colores (precisión de color 1–8), Suavidad (umbral de esquina), Detalle (filtro de manchas). El re-trazado ocurre automáticamente.
- Para el modo Incrustar, activa opcionalmente el contorno Sobel para un contorno vectorial adecuado para flujos de corte/impresión.
- Descarga el SVG. El JPG original queda intacto en el disco — los archivos nunca salen del dispositivo.
Casos de uso comunes
- Vectorizar logos o ilustraciones de color plano (preset Logo) guardados como JPG para cortadoras láser, plotters de vinilo o editores vectoriales.
- Producir el SVG más detallado posible a partir de una fotografía JPG usando el preset Foto — útil para slots de sistema de diseño que deben ser SVG.
- Incrustar un JPG fotográfico dentro de un entorno SVG-only vía modo Incrustar — el SVG escala vía viewBox mientras el ráster permanece píxel a píxel.
- Generar el arte de una pegatina / calcomanía desde una foto: base ráster en modo Incrustar + contorno Sobel guía a una cortadora mientras el ráster muestra el diseño.
- Convertir un set de iconos desde fuentes JPG de vuelta a SVG vectorial escalable usando el preset Logo.
Preguntas frecuentes
¿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. El modo Incrustar produce un SVG técnicamente válido pero el contenido es el JPG ráster original dentro de un elemento `<image>` — escala vía viewBox pero el contenido en píxeles sigue ligado a la resolución. Para vectorización genuina usa un preset de trazado; para envoltorio fiel al píxel usa Incrustar.
¿El SVG será mayor que el JPG?
Depende del preset. Los SVGs Logo y B/N suelen ser menores que el JPG origen para contenido de pocos colores. El SVG Foto puede ser sustancialmente mayor que el JPG para contenido fotográfico porque los datos de path crecen con la precisión de color. El SVG en modo Incrustar es mayor porque codificar Base64 el ráster añade ~33% de sobrecarga.
¿Qué produce el preset Foto frente a otras herramientas?
Foto usa la configuración de máxima precisión de color y separación de capas más fina de VTracer, produciendo una 'pintura vectorial' detallada — múltiples capas de color apiladas trazadas como grupos de paths rellenos individuales. La salida es un SVG real con paths auténticos, pero es voluminosa: más paths y un archivo mayor que los presets Logo o Ilustración. Otras herramientas típicamente producen un resultado posterizado simplista o directamente incrustan el ráster. El preset Foto es lo más detallado que VTracer puede producir para contenido de tono continuo.
¿El SVG escala limpio a cualquier tamaño?
Los cuatro presets de trazado producen vectores reales que escalan sin pérdida. El SVG en modo Incrustar escala vía viewBox pero el ráster embebido se pixela más allá de su resolución original. Para señalética o impresión de gran formato, usa el preset Foto o Ilustración.
¿Se sube mi archivo?
No. VTracer corre como módulo WASM dentro de un Web Worker en tu navegador — sin peticiones al servidor. DevTools Network no muestra subidas. El SVG se expone vía URL.createObjectURL.
Trade-offs JPG a SVG: presets VTracer vs modo Incrustar
JPG → SVG es genuinamente difícil porque las fotos JPG varían en cada píxel y SVG fundamentalmente representa regiones discretas. Los presets eligen trade-offs distintos: **Logo** aplica filtrado agresivo de manchas y clustering de colores planos — adecuado para escaneos JPG de logos, iconos y arte de color plano donde el JPG se eligió por compatibilidad más que por calidad; la salida es limpia y compacta. **Ilustración** equilibra la precisión de color y la suavidad — adecuado para arte de estilo vectorial o contenido posterizado guardado como JPG. **Foto** maximiza la precisión de color (slider Colores, 1–8 niveles) y la separación de capas, produciendo la salida vectorial más detallada para contenido JPG de tono continuo — el trade-off de 'pintura vectorial detallada': más paths, archivo mayor, pero el resultado de vectorización más cercano a la fotografía original. **B/N** aplica trazado binario — el JPG se umbraliza a dos valores antes de que VTracer corra, produciendo un SVG de contorno monocromo a partir de contenido de alto contraste o arte lineal. El modo **Incrustar** envuelve el JPG ráster original dentro de un elemento SVG `<image>`; el archivo ES SVG válido y escala vía viewBox, pero el contenido sigue ligado a los píxeles — el detalle fotográfico se preserva porque no se aplica ningún paso de vectorización con pérdida. 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 — útil para flujos de pegatina / corte de vinilo donde el ráster da el visual y el contorno guía la cortadora. VTracer usa splines Bezier cúbicas y una estrategia de capas apiladas; la salida es determinista.
- Motor VTracer WASM (visioncortex/vtracer, Rust, MIT) — autocompilado, vendorizado ~122 KB, module Web Worker
- Cuatro presets de trazado: Logo, Ilustración, Foto (máximo detalle — más paths, archivo mayor), B/N (contorno binario)
- Modo Incrustar: envuelve el JPG ráster original en SVG <image>, píxel a píxel para contenido fotográfico
- Salida determinista: mismo JPG + preset + sliders = mismo SVG siempre
- Submuestre a 2048 px antes de trazar — maneja fuentes JPG de alta resolución
- Superposición Sobel opcional (Sobel y Feldman 1968 SAIL) para flujos de corte / vinilo / plotter en modo Incrustar
- Salida SVG según W3C SVG 1.1 Second Edition (16 de agosto de 2011) — splines Bezier cúbicas
- 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.
- 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.
- ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — source JPG bitstream decoded to RGB pixels via the browser's built-in JPEG decoder before tracing.
- 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 mechanism: decode JPG into a canvas → getImageData returns the pixel array transferred to the vectorize worker for tracing.
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.