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 — d3-contour Marching Squares + LAB k-means
Convierte fotografías JPG a SVG (W3C SVG 1.1 Second Edition, Recommendation 16 de agosto de 2011) usando una pipeline en tres modos que aborda la tensión fundamental entre el contenido de tono continuo del JPG (variación continua de color por píxel) y la representación de regiones discretas del SVG: (1) **Posterize** aplica un filtro bilateral (Tomasi y Manduchi 1998, ICCV 1998) para suprimir artefactos de bloque del JPG, ejecuta cuantización k-means en LAB (espacio de color CIE L*a*b* 1976, perceptualmente uniforme — supera al RGB Euclidiano para clustering de paleta) a una paleta de 2–128 colores, y luego traza los contornos de cada cluster vía d3-contour marching squares (Mike Bostock, ISC, npm v4.0.2) y suaviza los vértices del polígono con Bezier vía splines Catmull-Rom (Catmull y Rom 1974, Academic Press, pp. 317-326). El resultado es un SVG vectorial verdadero con paths suaves rellenos — idóneo para logos, iconos, ilustraciones y posters; las fotografías quedan estilizadas. (2) **Faithful** envuelve el JPG ráster dentro de un elemento SVG <image> (técnicamente un archivo vectorial — escala vía viewBox — pero fiel a los píxeles para contenido fotográfico). Una superposición opcional de bordes Sobel (Sobel y Feldman 1968 SAIL) añade un contorno vectorial para flujos de corte/impresión. (3) **Hybrid** combina la base ráster de Faithful con los paths trazados de Posterize superpuestos a una opacidad controlada por el usuario — visualmente fiel a la foto con geometría vectorial extraíble debajo para cortadoras y plotters. El procesamiento corre íntegro del lado cliente en una copia subsampleada (máximo 400 px en el lado más largo) para mantener k-means + trazado por debajo de ~3 s en portátiles de gama media; el modo Faithful conserva la resolución original del ráster.
Cómo convertir JPG a SVG
- Arrastra un .jpg a la herramienta o haz clic para seleccionarlo. El navegador decodifica el JPG a un array de píxeles RGB vía getImageData.
- Elige un modo: Posterize (vector real, idóneo para logos/iconos/ilustraciones), Faithful (envoltorio ráster, idóneo para fotos) o Hybrid (ambos — base ráster con paths trazados superpuestos).
- Ajusta los parámetros para Posterize / Hybrid: tamaño de paleta de color (por defecto 16, rango 2–128), fuerza de suavizado (0–1, por defecto 0,7), opacidad de la superposición para Hybrid (por defecto ~0,4), contorno Sobel opcional con umbral de magnitud de borde (por defecto 80 / 255).
- La pipeline filtro bilateral + k-means LAB + d3-contour corre en una copia subsampleada (máximo 400 px en el lado más largo para k-means + trazado; Faithful conserva resolución original). El procesamiento típicamente termina en unos segundos en portátiles de gama media.
- 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 (modo Posterize) para cortadoras láser, plotters de vinilo o editores vectoriales que necesitan paths extraíbles.
- Producir un SVG Hybrid de una fotografía de producto para un slot de sistema de diseño que espera SVG pero quiere fidelidad visual (base ráster) más contornos vectoriales extraíbles (overlay de paths).
- Embeber un JPG fotográfico dentro de un entorno SVG-only vía modo Faithful — el SVG escala vía viewBox preservando el contenido en píxeles.
- Generar el arte de una pegatina / calcomanía desde una foto: base ráster en modo Faithful + overlay de contorno Sobel guía a una cortadora desde los paths SVG mientras el ráster muestra el diseño.
- Convertir un set de iconos desde fuentes JPG ráster de vuelta a SVG vectorial escalable para un sistema de diseño que ha migrado de ráster a SVG como arte primario.
Preguntas frecuentes
¿Es vectorización real?
Los modos Posterize y Hybrid producen paths vectoriales reales (elementos <path d='…'> auténticos trazados desde el origen). El modo Faithful es técnicamente un archivo vectorial — el SVG escala vía viewBox — pero el contenido es el ráster original envuelto en un elemento <image>. Elige Posterize para vectorización genuina, Faithful para envolver ráster en SVG, Hybrid para ambos a la vez. La pipeline Posterize usa d3-contour marching squares (Mike Bostock, ISC, npm v4.0.2) sobre regiones cuantizadas en LAB en lugar del enfoque más antiguo de Potrace — el resultado son paths Bezier suaves vía interpolación Catmull-Rom en lugar de polilíneas solo de esquinas.
¿El SVG será mayor que el JPG?
Depende del modo. El SVG Posterize suele ser menor que el JPG origen para contenido de pocos colores (logos, iconos) pero mayor para contenido fotográfico (los datos de path crecen con el conteo de clusters). El SVG Faithful es mayor porque codificar Base64 el ráster añade ~33% de sobrecarga sobre los bytes del JPG. Hybrid es el mayor — lleva el ráster más los paths trazados. Elige el modo que case con las restricciones de tamaño del destino; Posterize para pipelines vectoriales sensibles al tamaño, Faithful cuando la fidelidad pesa más que el tamaño.
¿En qué se diferencia la cuantización k-means en LAB de las herramientas basadas en RGB?
La distancia Euclidiana en RGB (usada por ImageTracer y herramientas de solo-trazado similares) infravalora la percepción de luminosidad — los verdes brillantes se sobre-clusterizan mientras que los cambios sutiles de tono de piel se infra-clusterizan. CIE L*a*b* 1976 fue diseñado para ser perceptualmente uniforme: distancias numéricas iguales corresponden a diferencias de color percibidas aproximadamente iguales. Clusterizar en LAB produce paletas que casan con lo que el ojo nota, así que el SVG Posterize resultante retiene la estructura visual en lugar de colapsar en unos pocos tonos dominantes. El paso previo del filtro bilateral (Tomasi y Manduchi 1998) también suprime los artefactos de bloque JPEG 8×8 antes de clusterizar, evitando que las fronteras de artefactos se vuelvan fronteras espurias de cluster.
¿El SVG escala limpio a cualquier tamaño?
El modo Posterize sí — los paths son vectores reales y escalan sin pérdida a cualquier resolución. El modo Faithful no — el ráster embebido se pixela más allá de su resolución original porque el contenido del <image> está ligado a la rejilla de píxeles de origen. Hybrid es mixto: la base ráster se pixela como en Faithful, pero los paths Posterize superpuestos escalan sin pérdida. Para destinos que puedan hacer zoom (señalética, impresión de gran formato), solo Posterize es la elección segura.
¿Se sube mi archivo?
No. La decodificación + filtro bilateral + k-means LAB + trazado d3-contour + serialización SVG corren todos del lado cliente vía WHATWG Canvas getImageData. La pestaña Network de DevTools muestra cero peticiones de subida. El SVG descargable se expone vía URL.createObjectURL desde el string en memoria.
Tres modos, tres pipelines: trade-offs Posterize / Faithful / Hybrid
JPG → SVG es genuinamente difícil porque las fotos JPG varían en cada píxel y SVG fundamentalmente representa regiones discretas. Los tres modos eligen trade-offs distintos: (1) **Posterize** es vectorización real. El filtro bilateral (sigma_espacial ≈ 2 px, sigma_color ≈ 28) preserva bordes mientras suaviza los artefactos de bloque JPEG 8×8; la cuantización k-means en LAB agrupa píxeles por distancia de color perceptual (el eje L* aproxima la percepción de luminosidad, a* y b* aproximan los canales oponentes rojo-verde y azul-amarillo según CIE 1976), evitando el sobre-clustering de verdes brillantes que produce el k-means puro RGB; d3-contour marching squares extrae los polígonos límite de cluster; los splines Catmull-Rom (interpolantes cúbicos, continuidad C¹, soporte local) suavizan los vértices con Bezier para que los paths rendericen como curvas suaves en lugar de polilíneas dentadas. Idóneo para contenido que ya tiene regiones discretas de color: logos, iconos, ilustraciones de estilo vectorial, posters. El contenido fotográfico queda estilizado (el aspecto 'posterizado'). (2) **Faithful** envuelve el 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. 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 donde el ráster da el visual y el contorno guía la cortadora. (3) **Hybrid** es el compromiso fidelidad-más-vectores: la base ráster de Faithful preserva el detalle fotográfico para visualización, los paths trazados de Posterize se superponen a una opacidad controlada por el usuario (por defecto ~0,4) y proporcionan geometría real <path d='…'> que pueden extraer editores vectoriales, plotters o cortadoras. Elige el modo que case con el destino: cortadora / plotter / vector editable → Posterize; reproducción visual en contexto SVG-only → Faithful; ambos propósitos desde un archivo → Hybrid.
- Vectorizador en tres modos: Posterize (vector real), Faithful (envoltorio ráster), Hybrid (ráster + overlay vector)
- Pipeline Posterize: filtro bilateral (Tomasi y Manduchi 1998 ICCV) → k-means en LAB (CIE L*a*b* 1976) → d3-contour marching squares (Bostock, ISC) → suavizado Bezier Catmull-Rom (Catmull y Rom 1974)
- Cuantización en espacio de color LAB supera al clustering Euclidiano en RGB para generación de paleta perceptualmente uniforme
- Tamaño de paleta de color configurable (2–128 colores), fuerza de suavizado (0–1) y área mínima de contorno
- Superposición opcional de bordes Sobel (Sobel y Feldman 1968 SAIL) para flujos de corte / vinilo / plotter
- Modo Hybrid: base ráster + paths vectoriales con opacidad de superposición controlada por el usuario (por defecto ~0,4)
- Salida SVG según W3C SVG 1.1 Second Edition (16 de agosto de 2011) — compatibilidad universal con editores vectoriales
- Lado navegador vía WHATWG Canvas getImageData — los archivos nunca salen del dispositivo
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Fuentes (8)
- Bostock, M. (D3.js) (2024). d3-contour — compute contour polygons using marching squares. github.com/d3/d3-contour (ISC license, npm v4.0.2) — vector contour extraction library used by the Posterize and Hybrid modes; marching squares applied to a per-cluster binary mask after LAB k-means quantisation produces the polygon boundaries that become SVG paths.
- Tomasi, C., & Manduchi, R. (1998). Bilateral Filtering for Gray and Color Images. Proceedings of the 6th IEEE International Conference on Computer Vision (ICCV 1998), Bombay, India, 4-7 January 1998, pp. 839-846 — edge-preserving smoothing applied as a pre-processing step before LAB k-means quantisation to reduce JPEG block artefacts without softening the contour boundaries the tracer detects.
- International Commission on Illumination (CIE) (1976). CIE 1976 L*a*b* (CIELAB) colour space. CIE 015 — Colorimetry standard; perceptually uniform colour space used by the k-means clustering step so palette colours match human-perceived colour distance rather than raw RGB Euclidean distance (which under-weights luminance differences).
- Catmull, E., & Rom, R. (1974). A class of local interpolating splines. Computer Aided Geometric Design (R. E. Barnhill & R. F. Riesenfeld, Eds.), Academic Press, New York, pp. 317-326 — cubic interpolating spline with C¹ continuity used for Bezier-smoothing the polygon vertices d3-contour produces, so the SVG paths render as smooth curves instead of jagged polylines.
- 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 used for the optional outline overlay in Faithful and Hybrid modes; 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 Faithful and Hybrid modes.
- 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 LAB conversion and 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 fed to the bilateral filter and LAB quantiser.
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.
Por Marco B. ·