PNG se vectoriza a SVG trazando regiones de color — un logo típico se reduce 5-10× (40 KB → 4 KB). Ideal para logos, iconos e imágenes posterizadas donde importa el escalado nítido. Las fotos pierden detalle en el trazado — vectoriza activos diseñados, no fotografía raster real.
Comparativa PNG vs SVG
| Propiedad | PNG | 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) |
| Logo típico | 30-50 KB | 1-10 KB (mucho menor) |
| Editable en editor de texto | No (DEFLATE binario) | Sí (XML legible) |
| Año de introducción | 1996 (RFC 2083) | 2001 (W3C SVG 1.0) |
| Soporte navegador | Universal (~100%) | Universal (~100%) |
| Ideal para | Fotos, capturas | Logos, iconos, diagramas |
| Canal alfa | Sí (RGBA) | Sí (opacidad por path) |
| Animación | No (usa APNG) | Sí (SMIL + CSS + JS) |
| CSS/JS interactivo | No | Sí (direccionable vía DOM) |
| Profundidad de color | 8 o 16 bits/canal | 24-bit + gradientes + filtros |
| Método de conversión | Compresión directa sin pérdida | Trazado + posterización |
Vectorizador PNG a SVG — VTracer WASM + Transparencia PNG
Convierte imágenes PNG (W3C Recommendation 10 de noviembre de 2003 / ISO/IEC 15948:2004, ráster sin pérdida con compresión DEFLATE según RFC 1951 Deutsch mayo de 1996) 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. El PNG es la entrada ideal para vectorizar logos e iconos: la compresión DEFLATE sin pérdida significa que no hay artefactos de bloque 8×8 que suprimir antes del trazado, y el canal alfa del PNG (modo RGBA o chunk tRNS) lleva la transparencia que la herramienta preserva. Cuatro presets por intención cubren los usos principales del PNG: **Logo** (limpieza agresiva de manchas, colores planos — ideal para logotipos e iconos exportados como PNG), **Ilustración** (clustering de color equilibrado, curvas suaves — ideal para ilustraciones de color plano y capturas de pantalla con regiones UI discretas), **Foto** (máxima precisión de color, separación de capas más fina — una pintura vectorial detallada de PNGs fotográficos; más paths, archivo mayor) y **B/N** (trazado binario — ideal para arte lineal, bocetos y documentos escaneados). El trazado opera sobre una copia submuestreada (máximo 2048 px en el lado más largo) y es determinista: el mismo PNG con el mismo preset produce siempre el mismo SVG. El modo **Incrustar** envuelve el PNG ráster original en un elemento SVG `<image>` a resolución completa con alfa preservada extremo a extremo (el modo RGBA y el chunk tRNS del PNG viajan byte a byte al data URL del `<image>` SVG). Un contorno Sobel opcional añade un contorno vectorial para flujos de corte/impresión.
Cómo convertir PNG a SVG
- Arrastra un .png a la herramienta o haz clic para seleccionarlo. El navegador decodifica el PNG (W3C 2ª Edición / ISO/IEC 15948:2004) a un array de píxeles RGB(A).
- Elige un preset: Logo (colores planos, limpieza de manchas — el contenido principal del PNG), Ilustración (equilibrado, adecuado para capturas de pantalla y gráficos planos), Foto (máximo detalle — más paths, archivo mayor), B/N (contorno binario para arte lineal) o Incrustar (ráster original en envoltorio SVG, alfa preservada).
- 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 y ajusta el umbral de magnitud de borde.
- Descarga el SVG. El PNG original queda intacto en el disco — los archivos nunca salen del dispositivo.
Casos de uso comunes
- Vectorizar logos PNG de color plano o iconos (preset Logo) para cortadoras láser, plotters de vinilo o editores vectoriales que necesitan paths extraíbles.
- Producir un SVG de una captura de pantalla PNG para un slot de sistema de diseño que espera SVG — usa el preset Ilustración para regiones UI discretas.
- Incrustar un PNG transparente dentro de un entorno SVG-only vía modo Incrustar — el canal alfa viaja byte a byte al elemento SVG `<image>`.
- Generar el arte de una pegatina / calcomanía desde un PNG: base ráster en modo Incrustar + contorno Sobel guía a una cortadora desde los paths SVG mientras el ráster muestra el diseño.
- Convertir un set de iconos PNG de vuelta a SVG vectorial escalable para un sistema de diseño que migra de ráster a SVG como arte primario.
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 PNG ráster original dentro de un elemento `<image>` — escala vía viewBox pero el contenido en píxeles sigue ligado a la resolución. Elige un preset de trazado para vectorización genuina; Incrustar para envolver ráster en SVG.
¿El SVG será mayor que el PNG?
Depende del preset. Los SVGs Logo y B/N suelen ser menores que el PNG origen para contenido de color plano. Ilustración es comparable. El SVG Foto crece con la precisión de color — puede ser mayor que el PNG para contenido fotográfico porque los datos de path son voluminosos. El SVG en modo Incrustar es mayor porque codificar Base64 el ráster añade ~33% de sobrecarga.
¿Sobrevive la transparencia del PNG?
En modo Incrustar, sí — el modo RGBA del PNG (alfa de 8 bits por píxel) y el chunk tRNS (alfa por entrada para PNG indexado) viajan byte a byte al data URL del elemento SVG `<image>`. En los presets de trazado, las áreas transparentes (píxeles por debajo del umbral alfa) se excluyen del trazado y quedan como paths ausentes en la salida.
¿El SVG escala limpio a cualquier tamaño?
Los cuatro presets de trazado producen vectores reales que escalan sin pérdida a cualquier resolución. 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 destinos que puedan hacer zoom (señalética, impresión de gran formato), usa un preset de trazado.
¿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 desde el resultado en memoria.
Trade-offs PNG a SVG: presets VTracer vs modo Incrustar
PNG → SVG se beneficia de las ventajas estructurales del PNG sobre JPG: la compresión DEFLATE sin pérdida (RFC 1951) significa que no hay artefactos de cuantización de bloque 8×8 que suprimir antes de trazar, y la transparencia del PNG — modo RGBA (alfa plena de 8 bits por píxel) o chunk tRNS (alfa por entrada para PNG indexado, o clave de color única para escala de grises/truecolor) — viaja limpiamente a la salida SVG. Los presets eligen trade-offs distintos: **Logo** aplica filtrado agresivo de manchas (slider Detalle) y agrupa en pocas regiones de color plano — paths limpios y compactos, ideales para logos e iconos PNG. **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 ilustraciones de estilo vectorial, gráficos de color plano y capturas de pantalla con regiones UI discretas. **Foto** maximiza la precisión de color y la separación de capas, produciendo una pintura vectorial detallada de PNGs fotográficos — el trade-off son más paths y un archivo mayor que el PNG de origen. **B/N** aplica trazado binario — el origen se reduce a dos valores antes de que VTracer corra, produciendo un contorno monocromo limpio ideal para arte lineal, documentos escaneados y sellos. El modo **Incrustar** envuelve el PNG ráster original (con alfa intacto) 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 — útil para flujos de pegatina / corte de vinilo. VTracer emite splines Bezier cúbicas usando una estrategia de capas apiladas, y el trazado es determinista: mismo PNG, 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ás paths, archivo mayor), B/N (binario)
- Transparencia PNG preservada en modo Incrustar — modo RGBA y chunk tRNS viajan byte a byte
- Salida determinista: mismo PNG + preset + sliders = mismo SVG siempre
- Submuestre a 2048 px antes de trazar — maneja exportaciones de logos de alta resolución
- Modo Incrustar: envuelve PNG original en SVG <image> a resolución completa + contorno Sobel opcional
- 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 (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.
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — source PNG container with alpha channel; tRNS chunk (per-entry alpha for indexed-colour PNG) and RGBA mode (full 8-bit alpha) decoded losslessly via the browser's built-in PNG decoder before tracing.
- Deutsch, P. (1996). DEFLATE Compressed Data Format Specification version 1.3. RFC 1951, IETF (May 1996, Aladdin Enterprises — LZ77 + Huffman; 32 KB sliding window) — PNG IDAT compression algorithm; the source PNG is decompressed 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 PNG 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.