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 — d3-contour Marching Squares + LAB k-means
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 una pipeline en tres modos que aborda la tensión fundamental entre la rejilla de píxeles discretos del PNG 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 suavizar bordes anti-aliased sin ablandar la geometría de los logos, 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 arte de color plano (el contenido principal del PNG); los PNG fotográficos quedan estilizados. (2) **Faithful** envuelve el PNG ráster dentro de un elemento SVG <image> con el canal alfa preservado extremo a extremo (el modo RGBA del PNG viaja byte a byte 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 — útil para flujos de pegatinas / corte de vinilo donde el ráster da el visual y los paths guían la cortadora. El procesamiento corre íntegro del lado cliente en una copia subsampleada (máximo 400 px en el lado más largo) para k-means + trazado; el modo Faithful conserva la resolución original del ráster.
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) vía getImageData.
- Elige un modo: Posterize (vector real, idóneo para logos/iconos/ilustraciones — el contenido principal del PNG), Faithful (envoltorio ráster preservando alfa, idóneo para PNGs fotográficos) 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 y alfa intacto).
- 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 (modo Posterize) para cortadoras láser, plotters de vinilo o editores vectoriales que necesitan paths extraíbles.
- Producir un SVG Hybrid de una captura de pantalla PNG para un slot de sistema de diseño que espera SVG pero quiere la fidelidad de píxel original (base ráster) más geometría de paths extraíble (overlay).
- Embeber un PNG transparente dentro de un entorno SVG-only vía modo Faithful — 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 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 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?
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> con alfa preservada. 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 PNG?
Depende del modo. El SVG Posterize suele ser menor que el PNG origen para contenido de pocos colores (logos, iconos, arte plano — el contenido principal del PNG) 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 PNG. 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.
¿Sobrevive la transparencia del PNG?
En modos Faithful e Hybrid, 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 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, así que las áreas transparentes del origen quedan como paths ausentes en la salida (también transparentes al renderizar).
¿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 PNG-específicos Posterize / Faithful / Hybrid
PNG → SVG se beneficia de las ventajas estructurales del PNG sobre JPG: la compresión DEFLATE sin pérdida significa que no hay artefactos de cuantización de bloque 8×8 que suprimir, y el chunk tRNS del PNG (alfa por entrada para PNG indexado) o el modo RGBA (alfa pleno de 8 bits) preservan la transparencia que el vectorizador puede llevar al SVG de salida. Los tres modos eligen trade-offs distintos: (1) **Posterize** es vectorización real. El filtro bilateral (sigma_espacial ≈ 2 px, sigma_color ≈ 28) suaviza bordes anti-aliased y ruido de 1 píxel sin aplastar la geometría nítida del logo; 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 del 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 en curvas suaves. Idóneo para el contenido principal del PNG: logos, iconos, ilustraciones, capturas de pantalla con regiones de UI discretas, arte de color plano. (2) **Faithful** 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 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 PNG (con alfa preservada) 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. Elige el modo que case con el destino: cortadora / plotter / vector editable → Posterize; visualización píxel-fiel en contexto SVG-only → Faithful; ambos propósitos desde un archivo → Hybrid.
- 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)
- Cuantización en espacio de color LAB supera al clustering Euclidiano en RGB para generación de paleta perceptualmente uniforme
- Tamaño de paleta configurable (2–128 colores), fuerza de suavizado (0–1) y área mínima de contorno
- Transparencia PNG preservada en modos Faithful e Hybrid — chunk tRNS (alfa por entrada para PNG indexado) y modo RGBA (alfa de 8 bits) viajan limpiamente
- 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
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 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; for PNG sources with sharp anti-aliased edges, the bilateral filter prevents the alpha-edge ringing from becoming 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 so palette colours match human-perceived colour distance rather than raw RGB Euclidean distance.
- 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 used for the optional outline overlay in Faithful and Hybrid modes.
- 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 LAB conversion and 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 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 PNG 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. ·