Skip to content

Vectorizador Imagen a SVG Online

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

Vectorizador Imagen a SVG — Pipeline d3-contour 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 una pipeline en tres modos format-agnostic en la entrada — el decodificador HTMLImageElement del navegador maneja todo formato ráster soportado, y la misma vectorización d3-contour corre sobre los píxeles decodificados independientemente del origen. (1) **Posterize** aplica un filtro bilateral (Tomasi y Manduchi 1998, Proc. ICCV Bombay pp. 839-846) para suavizar artefactos específicos del formato (fronteras de bloque JPG, cuantización VP8 del WebP, bordes anti-aliased de PNG), 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 desde cualquier formato origen. (2) **Faithful** envuelve el ráster origen (con alfa preservado donde el formato lo soporte: PNG RGBA, WebP ALPH, AVIF auxiliary) dentro de un elemento SVG <image>. 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. 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 y alfa nativo del origen.

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

Cómo convertir una imagen a SVG

  1. Arrastra cualquier imagen ráster (.jpg / .png / .webp / .avif / .heic) a la herramienta o haz clic para seleccionarla. El HTMLImageElement del navegador decodifica el origen vía su decodificador de formato integrado independientemente del tipo de entrada.
  2. Elige un modo: Posterize (vector real, idóneo para logos/iconos/ilustraciones desde cualquier origen), Faithful (envoltorio ráster preservando alfa nativo del origen, idóneo para contenido fotográfico) 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 nativo del origen intacto).
  5. Descarga el SVG. La imagen original queda intacta en el disco — los archivos nunca salen del dispositivo.

Casos de uso comunes

  • Vectorizar una librería de iconos de formatos mezclados (JPG + PNG + WebP) en un set de salida SVG en modo Posterize sin tener que convertir formatos primero.
  • Producir SVG Hybrid desde fotografías AVIF o HEIC (formatos modernos sin path vectorial nativo) para slots de sistema de diseño que esperan SVG.
  • Generar el arte de una pegatina / calcomanía desde cualquier formato origen: 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.
  • Vectorizar logos JPG legacy que perdieron sus archivos vectoriales originales — el modo Posterize reconstruye un SVG con paths suaves desde el ráster.
  • Convertir una foto HEIC de iPhone (decodificada nativa en Safari 17+ desde 26 de septiembre de 2023) en un SVG Hybrid para un flujo de impresión + corte sin conversión de formato intermedia.

Preguntas frecuentes

¿Qué formatos de entrada se soportan?

Cualquier formato ráster que el HTMLImageElement del navegador decodifique nativamente: JPG (ITU-T T.81 / ISO/IEC 10918-1, 18 de septiembre de 1992), PNG (W3C 2ª Edición / ISO/IEC 15948:2004, 10 de noviembre de 2003), WebP (RFC 9649 Zern, Massimino y Alakuijala noviembre de 2024), AVIF (AOMedia AV1 Image File Format) y HEIC en Safari 17+ (lanzado el 26 de septiembre de 2023 con macOS Sonoma; la build de iOS 17 se distribuyó el 18 de septiembre de 2023). Todos los orígenes decodificados llegan a la misma pipeline de vectorización independientemente del formato origen.

¿El resultado depende del formato origen?

La pipeline de vectorización es format-agnostic — el mismo paso filtro bilateral + k-means LAB + d3-contour corre sobre los píxeles decodificados. El SVG Posterize se ve igual ya sea el origen JPG o PNG de la misma imagen. El filtro bilateral es especialmente valioso para formatos con pérdida (JPG, WebP con pérdida) porque suprime artefactos de codificación antes del clustering, pero también beneficia a orígenes sin pérdida (PNG, WebP sin pérdida) al suavizar bordes de rampa anti-aliased sin aplastar geometría nítida.

¿Cómo se comporta el alfa entre formatos?

Los modos Faithful e Hybrid preservan el alfa donde el formato origen lo lleva: modo RGBA del PNG (alfa de 8 bits) y chunk tRNS (alfa por entrada para PNG indexado), chunk ALPH del WebP (RFC 9649 §2.7.1.2), plano alfa auxiliar del AVIF (ISO/IEC 23008-12 HEIF). JPG y HEIC son típicamente opacos así que la transparencia no aplica. En modo Posterize, el alfa se binariza en todos los formatos: los píxeles por debajo del umbral de transparencia se excluyen del clustering y los paths resultantes solo cubren las regiones opacas.

¿Qué modo elijo?

Posterize para logos, iconos, ilustraciones de color plano donde quieres paths vectoriales reales extraíbles. Faithful para fotografías donde necesitas visualización píxel-fiel en contexto SVG-only (el SVG escala vía viewBox pero el contenido sigue ligado a píxeles). Hybrid cuando necesitas ambos — fidelidad visual de la base ráster más geometría vectorial extraíble del overlay de paths (flujos pegatina / vinilo / plotter). El predeterminado es Posterize para imágenes origen con regiones discretas de color.

¿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.

Vectorización format-agnostic — trade-offs Posterize / Faithful / Hybrid

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); getImageData entrega ese array a la misma pipeline de vectorización independientemente del formato origen. Los tres modos eligen trade-offs distintos: (1) **Posterize** es vectorización real. El filtro bilateral (sigma_espacial ≈ 2 px, sigma_color ≈ 28) maneja ruido específico del formato — fronteras de bloque DCT 8×8 del JPG, artefactos de keyframe VP8 del WebP, bordes anti-aliased del PNG, residuos de predicción AV1 del AVIF — con el mismo paso de suavizado preservador de bordes; la cuantización k-means en LAB agrupa píxeles por distancia de color perceptual según CIE 1976 (L* luminosidad, a*+b* canales oponentes), 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 en curvas suaves. Idóneo para contenido con regiones discretas de color: logos, iconos, ilustraciones de estilo vectorial, posters, sin importar el formato en que el arte se haya guardado. (2) **Faithful** envuelve el ráster original dentro de un elemento SVG <image> con alfa preservado donde el formato origen lo soporte (PNG RGBA, chunk ALPH del WebP según RFC 9649 §2.7.1.2, plano alfa auxiliar del AVIF según ISO/IEC 23008-12 HEIF; los orígenes JPG y HEIC opacos componen contra fondo opaco). 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. (3) **Hybrid** es el compromiso fidelidad-más-vectores: la base ráster de Faithful preserva los píxeles del origen 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='…'> extraíble por editores vectoriales, plotters o cortadoras. La entrada format-agnostic significa que un único flujo maneja librerías de assets de formatos mezclados: arrastrar un JPG, PNG o WebP a la misma herramienta produce salida SVG consistente independientemente de las elecciones de codificación del origen.

  • Entrada format-agnostic vía HTMLImageElement del navegador: JPG / PNG / WebP / AVIF / HEIC (Safari 17+) llegan todos a la misma pipeline
  • Vectorizador en tres modos: Posterize (vector real), Faithful (envoltorio ráster, alfa preservado por formato origen), 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 en todos los formatos origen
  • Tamaño de paleta configurable (2–128 colores), fuerza de suavizado (0–1) y área mínima de contorno
  • Alfa preservada por formato origen: PNG RGBA, WebP ALPH (RFC 9649 §2.7.1.2), AVIF auxiliary plane (ISO/IEC 23008-12 HEIF) viajan todas en modos Faithful e Hybrid
  • 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

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 regardless of source raster format.
  • 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 uniformly before LAB k-means clustering across all source raster formats (JPG, PNG, WebP, AVIF, HEIC).
  • 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 regardless of source raster format.
  • 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.
  • 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.
  • 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 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: any decoded source bitmap → getImageData returns the pixel array fed to the bilateral filter and LAB quantiser, 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.

Guías relacionadas

Patrocinado

Por ·