Skip to content

Vectorizador WebP a SVG Online

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

Vectorizador WebP a SVG — VTracer WASM, WebP con y sin Pérdida

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 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. Ambas variantes WebP (con y sin pérdida) llegan a la misma pipeline de trazado después de que el navegador las decodifica a un array de píxeles RGB(A). Cuatro presets por intención: **Logo** (limpieza agresiva de manchas, colores planos — ideal para logos e iconos guardados como WebP), **Ilustración** (clustering de color equilibrado, curvas suaves — ideal para arte de color plano e ilustraciones de estilo vectorial en WebP), **Foto** (máxima precisión de color, separación de capas más fina — una pintura vectorial detallada de WebPs fotográficos; más paths, archivo mayor) y **B/N** (trazado binario — contorno monocromo, ideal para arte lineal o contenido WebP de alto contraste). El trazado opera sobre una copia submuestreada (máximo 2048 px en el lado más largo) y es determinista. El modo **Incrustar** envuelve el WebP ráster en un elemento SVG `<image>` con alfa preservada extremo a extremo — el chunk ALPH del WebP según RFC 9649 §2.7.1.2 viaja al data URL del `<image>` SVG. Un contorno Sobel opcional añade un contorno vectorial para flujos de corte/impresión. Decodificación WebP del navegador requerida: Chrome 32+, Firefox 65+, Safari 14+ (16 de septiembre de 2020), Edge 79+ (Chromium, 15 de enero de 2020).

Relacionado:Imagen a SVGPNG a SVGJPG a SVGWebP a JPGWebP a PNGWebP 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).
  2. Elige un preset: Logo (colores planos, limpieza de manchas), Ilustración (equilibrado), Foto (máximo detalle — más paths, archivo mayor), B/N (contorno monocromo binario) o Incrustar (ráster original en envoltorio SVG, alfa preservada vía chunk ALPH del WebP).
  3. 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.
  4. Para el modo Incrustar, activa opcionalmente el contorno Sobel para un contorno vectorial adecuado para flujos de corte/impresión.
  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 (preset Logo) para cortadoras láser, plotters de vinilo o editores vectoriales.
  • Producir el SVG más detallado de un WebP fotográfico (preset Foto) para un slot de sistema de diseño que debe ser SVG.
  • Incrustar un WebP transparente dentro de un entorno SVG-only vía modo Incrustar — 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 Incrustar + contorno Sobel guía a una cortadora mientras el ráster muestra el diseño.
  • Migrar una pipeline de assets WebP-first de vuelta a SVG cuando los requisitos exigen compatibilidad con editores vectoriales (preset Logo o Ilustración).

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. El modo Incrustar produce un SVG técnicamente válido pero el contenido es el WebP ráster original dentro de un elemento `<image>` con alfa preservada vía el chunk ALPH del WebP.

¿Maneja WebP con y sin pérdida?

Sí. Ambas variantes llegan a VTracer tras la decodificación del navegador a un array RGB(A) — la pipeline de trazado es la misma independientemente de si el origen usó VP8 con pérdida (RFC 6386) o LZ77 + Huffman sin pérdida (RFC 9649 §3).

¿El SVG será menor que el WebP?

Depende del preset. Los SVGs Logo y B/N suelen ser menores que el WebP origen para contenido de color plano. El SVG Foto puede ser mayor que el WebP 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 añade ~33% de sobrecarga.

¿Sobrevive la transparencia del WebP?

En modo Incrustar, 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>`. En los presets de trazado, las áreas transparentes se excluyen del trazado.

¿Se sube mi archivo?

No. VTracer corre como módulo WASM dentro de un Web Worker en tu navegador — sin peticiones al servidor. Decodificación WebP del navegador requerida (Chrome 32+ / Firefox 65+ / Safari 14+ desde 16 de septiembre de 2020 / Edge 79+).

Trade-offs WebP a SVG: presets VTracer vs modo Incrustar, con y sin pérdida

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 con 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). Ambas variantes llegan a VTracer tras la decodificación del navegador. Los presets eligen trade-offs distintos: **Logo** aplica filtrado agresivo de manchas (slider Detalle) y clustering de colores planos — adecuado para logos e iconos WebP donde dominan las regiones de color discreto. **Ilustración** equilibra la precisión de color (slider Colores, 1–8 niveles) y la suavidad de las curvas (slider Suavidad, umbral de esquina) — adecuado para arte de estilo vectorial y gráficos de color plano en WebP con o sin pérdida. **Foto** maximiza la precisión de color y la separación de capas, produciendo la salida vectorial más detallada para WebP fotográfico — más paths y un archivo mayor que Logo o Ilustración. **B/N** aplica trazado binario — el WebP se umbraliza a dos valores antes de que VTracer corra, produciendo un SVG de contorno monocromo. El modo **Incrustar** envuelve el WebP ráster original (con alfa intacto vía el chunk ALPH del WebP según RFC 9649 §2.7.1.2) 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 para flujos de pegatina / corte de vinilo. VTracer usa splines Bezier cúbicas y una estrategia de capas apiladas; la salida es determinista: mismo WebP, mismo preset, mismos sliders → mismo SVG siempre.

  • 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)
  • Decodificación de origen: WebP con pérdida (VP8 según RFC 6386) + WebP sin pérdida (LZ77 + Huffman según RFC 9649 §3)
  • Alfa WebP preservada en modo Incrustar — chunk ALPH según RFC 9649 §2.7.1.2 viaja byte a byte
  • Salida determinista: mismo WebP + preset + sliders = mismo SVG siempre
  • Submuestre a 2048 px antes de trazar — maneja fuentes WebP de alta resolución
  • 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 (Chrome 32+ / Firefox 65+ / Safari 14+ / Edge 79+)

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

Fuentes (7)
  • 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.
  • 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 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 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 mechanism: decode WebP 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.

Guías relacionadas

Patrocinado