Skip to content

Vectorizador WebP a SVG Online

En el navegador — sin subida
Última verificación mayo 2026 — corre en tu navegador

Vectorizador WebP a SVG — d3-contour Marching Squares + LAB k-means

Convierte imágenes WebP (RFC 9649 Zern, Massimino y Alakuijala — Google LLC, noviembre de 2024 Informational; modo con pérdida VP8 keyframes según RFC 6386 Bankoski et al. noviembre de 2011, modo sin pérdida LZ77 + Huffman/prefix coding) 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 la rejilla de píxeles del WebP y la representación basada en regiones del SVG: (1) **Posterize** aplica un filtro bilateral (Tomasi y Manduchi 1998, Proc. ICCV Bombay pp. 839-846) para suprimir los artefactos de cuantización VP8 del WebP con pérdida (o suavizar bordes anti-aliased en WebP sin pérdida), ejecuta cuantización k-means en LAB (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). Resultado: SVG vectorial verdadero con paths suaves rellenos — idóneo para logos, iconos, ilustraciones; los WebPs fotográficos quedan estilizados. (2) **Faithful** envuelve el WebP ráster dentro de un elemento SVG <image> con alfa preservado extremo a extremo (el chunk ALPH del WebP según RFC 9649 §2.7.1.2 viaja al data URL del <image> SVG). 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. Decodificación WebP del navegador requerida: Chrome 32+ (desde 2014), Firefox 65+ (desde enero de 2019), Safari 14+ (desde 16 de septiembre de 2020), Edge 79+ (Chromium, desde el 15 de enero de 2020). El procesamiento corre íntegro del lado cliente en una copia subsampleada (máximo 400 px en el lado más largo); Faithful conserva resolución original.

Relacionado: Imagen a SVG PNG a SVG JPG a SVG WebP a JPG WebP a PNG WebP a SVG

Cómo convertir WebP a SVG

  1. Arrastra un .webp a la herramienta o haz clic para seleccionarlo. El navegador decodifica el WebP (con pérdida vía VP8 según RFC 6386 o sin pérdida vía LZ77 + Huffman según RFC 9649 §3) a un array de píxeles RGB(A) vía getImageData.
  2. Elige un modo: Posterize (vector real, idóneo para logos/iconos/ilustraciones), Faithful (envoltorio ráster preservando alfa, idóneo para WebPs fotográficos) o Hybrid (ambos — base ráster con paths trazados superpuestos).
  3. 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).
  4. 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 y alfa intacto).
  5. Descarga el SVG. El WebP original queda intacto en el disco — los archivos nunca salen del dispositivo.

Casos de uso comunes

  • Vectorizar logos WebP de color plano o iconos (modo Posterize) para cortadoras láser, plotters de vinilo o editores vectoriales que necesitan paths extraíbles.
  • Producir un SVG Hybrid de un WebP fotográfico para un slot de sistema de diseño que espera SVG pero quiere fidelidad visual (base ráster) más geometría de paths extraíble (overlay).
  • Embeber un WebP transparente dentro de un entorno SVG-only vía modo Faithful — el alfa del chunk ALPH viaja byte a byte al elemento SVG <image>.
  • Generar el arte de una pegatina / calcomanía desde una foto WebP: 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.
  • Migrar una pipeline de assets WebP-first de vuelta a SVG cuando los requisitos de stakeholders exigen compatibilidad con editores vectoriales (modo Posterize).

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 WebP ráster original envuelto en un elemento <image> con alfa preservada vía el chunk ALPH del WebP. Elige Posterize para vectorización genuina, Faithful para envolver ráster en SVG, Hybrid para ambos. 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.

¿Maneja WebP con y sin pérdida?

Sí. El WebP con pérdida usa codificación de keyframe VP8 (RFC 6386 Bankoski et al., noviembre de 2011) con cuantización similar en espíritu al DCT 8×8 del JPG pero usando un modelo de predicción distinto — el paso previo del filtro bilateral suprime las fronteras de bloque VP8 antes del clustering en LAB. El WebP sin pérdida usa LZ77 + Huffman/prefix coding (RFC 9649 §3) sin cuantización; el filtro bilateral aún ayuda al suavizar bordes de rampa anti-aliased sin aplastar geometría nítida. Ambas variantes llegan a la misma pipeline de salida Posterize / Faithful / Hybrid.

¿El SVG será menor que el WebP?

Depende del modo. El SVG Posterize suele ser menor que el WebP 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 WebP. Hybrid es el mayor — lleva el ráster más los paths trazados.

¿Sobrevive la transparencia del WebP?

En modos Faithful e Hybrid, sí — el chunk ALPH del WebP (plano alfa según RFC 9649 §2.7.1.2) viaja byte a byte al data URL del elemento SVG <image> con alfa intacto. En modo Posterize, el canal alfa se binariza: los píxeles por debajo del umbral de transparencia se excluyen del clustering y los paths resultantes solo cubren las regiones opacas.

¿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. Decodificación WebP del navegador requerida (Chrome 32+ / Firefox 65+ / Safari 14+ desde 16 de septiembre de 2020 / Edge 18+).

Tres modos, tres pipelines: trade-offs WebP-específicos Posterize / Faithful / Hybrid

WebP → SVG maneja dos variantes WebP distintas: WebP con pérdida (codificación de keyframe VP8 según RFC 6386, con artefactos de cuantización similares al DCT 8×8 del JPG pero usando un modelo de predicción distinto) y WebP sin pérdida (LZ77 + Huffman/prefix coding según RFC 9649 §3, sin cuantización pero potencialmente con bordes anti-aliased). El paso previo del filtro bilateral maneja ambos: (sigma_espacial ≈ 2 px, sigma_color ≈ 28) suprime las fronteras de bloque VP8 del WebP con pérdida mientras preserva los bordes nítidos del logo, y suaviza bordes de rampa anti-aliased en WebP sin pérdida sin aplastar geometría nítida. Los tres modos eligen trade-offs distintos: (1) **Posterize** es vectorización real. La cuantización k-means en LAB agrupa píxeles por distancia de color perceptual según CIE 1976 (L* aproxima la percepción de luminosidad, a*+b* aproximan los canales oponentes rojo-verde y azul-amarillo), evitando el sobre-clustering de verdes brillantes del Euclidiano 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. Idóneo para contenido WebP con regiones discretas: logos, iconos, ilustraciones de estilo vectorial. (2) **Faithful** envuelve el ráster original (con alfa intacto vía el chunk ALPH del WebP) 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 añade un contorno vectorial para flujos de pegatina / corte de vinilo. (3) **Hybrid** combina la base ráster de Faithful con los paths trazados de Posterize superpuestos a una opacidad controlada por el usuario (por defecto ~0,4) — útil para flujos de impresión + corte donde el ráster muestra el diseño y los paths guían la cortadora. Nota de soporte de navegador: Safari 14+ (16 de septiembre de 2020) decodifica WebP de forma nativa, pero la herramienta corre en cualquier navegador que decodifique WebP — los orígenes pre-Safari-14 necesitan un polyfill libwebp en WebAssembly aguas arriba.

  • Vectorizador en tres modos: Posterize (vector real), Faithful (envoltorio ráster, alfa preservado), 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)
  • Decodificación de origen: WebP con pérdida (VP8 según RFC 6386 Bankoski et al. noviembre de 2011) + WebP sin pérdida (LZ77 + Huffman según RFC 9649 §3)
  • Alfa WebP preservada en modos Faithful e Hybrid — chunk ALPH según RFC 9649 §2.7.1.2 viaja byte a byte
  • Tamaño de paleta 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
  • Salida SVG según W3C SVG 1.1 Second Edition (16 de agosto de 2011) — compatibilidad universal con editores vectoriales
  • En el navegador vía WHATWG Canvas getImageData — los archivos nunca salen del dispositivo (Chrome 32+ / Firefox 65+ / Safari 14+ / Edge 79+ Chromium decodifican WebP nativo)

Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).

Fuentes (9)
  • 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 on per-cluster binary masks 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; especially valuable for lossy WebP sources where VP8 quantisation artefacts would otherwise become spurious cluster boundaries.
  • 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.
  • 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.
  • 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 outline overlay in Faithful and Hybrid modes.
  • Zern, J., Massimino, P., & Alakuijala, J. (Google LLC) (2024). WebP Image Format. RFC 9649, IETF (November 2024, Informational) — source WebP container; lossy mode (VP8 keyframes) and lossless mode (LZ77 + Huffman/prefix coding) both decoded to RGB(A) pixels via the browser's built-in WebP decoder (Chrome 32+, Firefox 65+, Safari 14+ since 16 September 2020) before LAB conversion and tracing.
  • Bankoski, J., Koleszar, J., Quillio, L., Salonen, J., Wilkins, P., & Xu, Y. (Google Inc.) (2011). VP8 Data Format and Decoding Guide. RFC 6386, IETF (November 2011, Informational) — VP8 keyframe bitstream used by WebP lossy mode; intra-prediction blocks decoded by the browser before pixel sampling.
  • 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.
  • 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 WebP 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.

Guías relacionadas

Patrocinado

Por ·