SVG se rasteriza a PNG aplanando los paths vectoriales en cuadrícula de tamaño fijo (p. ej. 256 × 256 px).PNG conserva la transparencia de los paths SVG y funciona en cualquier editor. Pierdes la escalabilidad y la animación, así que guarda el SVG original para re-exportar a diferentes tamaños.
Comparativa SVG vs PNG
| Propiedad | SVG | PNG |
|---|---|---|
| Tipo de formato | Vector (paths XML) | Raster (cuadrícula de píxeles) |
| Escalable a cualquier tamaño | Sí (zoom infinito sin pérdida) | No (rasterizar por resolución) |
| Logo típico | 1-10 KB | 30-50 KB |
| Editable en editor de texto | Sí (XML legible) | No (DEFLATE binario) |
| Año de introducción | 2001 (W3C SVG 1.0) | 1996 (RFC 2083) |
| Soporte navegador | Universal (~100%) | Universal (~100%) |
| Ideal para | Logos, iconos, diagramas | Raster de tamaño fijo para editores |
| Canal alfa | Sí (opacidad por path) | Sí (RGBA) |
| Animación | Sí (SMIL + CSS + JS) | No (usa APNG) |
| CSS/JS interactivo | Sí (direccionable vía DOM) | No |
| Profundidad de color | 24-bit + gradientes + filtros | 8 o 16 bits/canal |
| Método de conversión | Rasterizar a resolución elegida | Compresión directa sin pérdida |
SVG a PNG — Rasterizador Vectorial sin Pérdida en el Navegador
Rasteriza gráficos vectoriales SVG (W3C SVG 1.1 Second Edition, Recommendation 16 de agosto de 2011 / W3C SVG 2 Candidate Recommendation 4 de octubre de 2018, con desarrollo activo continuando como Editor's Draft en svgwg.org/svg2-draft) a PNG sin pérdida (W3C Recommendation 10 de noviembre de 2003 / ISO/IEC 15948:2004) usando la pipeline drawImage() del Canvas 2D Context del HTML Living Standard de WHATWG (html.spec.whatwg.org/#dom-context-2d-drawimage). El navegador carga el SVG en un HTMLImageElement, lo dibuja en un canvas a las dimensiones objetivo elegidas y serializa el bitmap vía HTMLCanvasElement.toBlob('image/png') — la compresión DEFLATE según RFC 1951 (Deutsch, mayo de 1996, LZ77 + Huffman con ventana deslizante de 32 KB) preserva cada píxel exactamente. Los SVG cargados vía el elemento img se procesan en 'secure static mode' o 'secure animated mode' según las reglas de conformidad de SVG 2 §2.2.4 (secure animated mode) / §2.2.6 (secure static mode) — scripts y recursos externos quedan bloqueados, así que la rasterización no puede ejecutar JavaScript embebido en el SVG. El modo RGBA de PNG preserva las regiones transparentes del SVG byte a byte, así que los logos, iconos e ilustraciones con fondos translúcidos viajan limpiamente. Los presets rápidos 1× / 2× / 4× sobre las dimensiones nativas del viewBox del SVG cubren el caso común de Retina / hi-DPI. La rasterización ocurre en la codificación sRGB del búfer del canvas (IEC 61966-2-1:1999) a precisión de 8 bits independientemente del perfil de color declarado del SVG. Los archivos nunca salen del dispositivo.
Cómo convertir SVG a PNG
- Arrastra un .svg a la herramienta o haz clic para seleccionarlo. El navegador parsea el SVG vía su renderer integrado (cargado como <img> en secure mode — scripts y recursos externos bloqueados).
- Elige las dimensiones de salida. Los presets 1× / 2× / 4× renderizan a múltiplos de las dimensiones del viewBox del SVG — 2× cubre la mayoría de pantallas Retina, 4× cubre imprenta y formato grande.
- drawImage() copia el bitmap rasterizado a un canvas a las dimensiones objetivo, preservando el canal alfa del SVG byte a byte.
- Canvas toBlob('image/png') serializa los píxeles vía DEFLATE según RFC 1951 — el paso de codificación es íntegramente sin pérdida desde el bitmap rasterizado.
- Descarga el PNG. El SVG original queda intacto en el disco — los archivos nunca salen del dispositivo.
Casos de uso comunes
- Producir logos PNG ráster desde fuentes SVG para plataformas que rechazan subidas .svg (la mayoría de CMS no-de-diseño, redes sociales, assets de app store).
- Renderizar iconos SVG a los tamaños exactos en píxeles que usa un sistema de diseño (16 / 24 / 32 / 48 / 64 / 128 px) sin reexportar desde un editor de escritorio.
- Crear variantes PNG de un set de iconos SVG a 1× / 2× / 4× para manifests de iconos de app, paquetes de favicon o entradas srcset responsive.
- Exportar arte SVG como PNG sin pérdida para maquetación editorial, pre-prensa de imprenta o archivo donde los artefactos de recodificación son inaceptables.
- Producir fallbacks PNG para entornos sin soporte SVG (navegadores antiguos, ciertos clientes de correo) mientras mantienes el máster SVG para futuras rasterizaciones.
Preguntas frecuentes
¿A qué tamaño renderizar?
Elige el doble del tamaño de display para pantallas Retina / alta DPI, o el tamaño exacto en píxeles que espera el destino. Los presets 1× / 2× / 4× multiplican las dimensiones del viewBox del SVG — 1× ignora la densidad de pantalla, 2× cubre la mayoría de Retina, 4× cubre imprenta y formato grande. Ir mayor de lo necesario infla el archivo PNG sin beneficio visible porque el destino reescalará igualmente.
¿El PNG preserva la transparencia?
Sí, byte a byte. Las regiones transparentes del SVG mapean directamente al modo RGBA de PNG (alfa de 8 bits por píxel) o al chunk tRNS (alfa por entrada para PNG indexado) según la 2ª Edición de W3C. La vía Canvas 2D Context preserva los bytes alfa con precisión: renderizar SVG → drawImage al canvas con alfa → toBlob('image/png') retiene cada píxel transparente. Logos e iconos con fondos translúcidos viajan limpiamente.
¿Se ejecutan los scripts del SVG durante la conversión?
No. Los SVG cargados vía el elemento <img> se procesan en 'secure static mode' o 'secure animated mode' según las reglas de conformidad de W3C SVG 2 §2.2.4 (secure animated mode) / §2.2.6 (secure static mode) — scripts, cargas HTTP externas y DOM scripting quedan todos bloqueados. Esta herramienta usa la vía <img> deliberadamente para que un SVG malicioso no pueda exfiltrar datos ni ejecutar código durante la rasterización. Los SVG cargados vía <object> o <svg> inline ejecutarían scripts; esta herramienta no usa esas vías.
¿Puedo renderizar a cualquier proporción?
La herramienta mantiene la proporción nativa del viewBox del SVG así que el arte no se estira ni se aplasta. Para proporciones no nativas, rasteriza primero a la proporción natural del SVG y luego recorta con la herramienta crop-image o aspect-ratio-crop. El atributo preserveAspectRatio del SVG (por defecto 'xMidYMid meet') gobierna cómo el viewBox mapea al canvas; la herramienta respeta ese atributo como esté declarado.
¿Y los SVG que contienen foreignObject?
Los SVG que incluyen elementos <foreignObject> contaminan el canvas (origin-clean = false) según el issue #10641 de WHATWG html.spec.whatwg.org, lo que provoca que toBlob() lance un SecurityError. La conversión fallará. Los SVG planos (paths, formas, texto, gradientes, primitivas de filtro) rasterizan con limpieza. Si tu SVG tiene contenido foreignObject, elimínalo o pre-renderízalo en un editor de escritorio antes de traerlo a esta herramienta.
Rasterización sin pérdida: por qué PNG es el destino natural — y los matices de secure-mode y foreignObject
PNG es el destino sin pérdida de SVG → ráster porque coinciden tres propiedades: (1) el modo RGBA de PNG preserva el canal alfa del SVG byte a byte vía el chunk tRNS (alfa por entrada para PNG indexado) o alfa pleno de 8 bits (modo RGBA) según la 2ª Edición de W3C; (2) PNG usa compresión DEFLATE sin pérdida así que no se incrustan artefactos de cuantización en la salida (a diferencia de JPG vía la cuantización del Anexo K); (3) PNG decodifica universalmente en todo editor, SO, CMS y pipeline de imprenta desde 1996. La conversión es una pipeline en dos pasos: el navegador parsea el SVG en un HTMLImageElement aplicando CSS, gradientes, primitivas de filtro y fallbacks de fuentes a la resolución objetivo; drawImage() copia ese bitmap a un canvas; toBlob('image/png') serializa los píxeles vía el codificador DEFLATE integrado del navegador. Aplican dos matices de seguridad: (a) los SVG cargados vía <img> corren en secure mode — scripts, cargas HTTP externas y DOM scripting quedan bloqueados. La herramienta usa la vía <img> deliberadamente para que un SVG malicioso no pueda ejecutar código durante la rasterización. (b) Los SVG que contienen <foreignObject> contaminan el canvas (origin-clean = false) según el issue #10641 de WHATWG html.spec.whatwg.org, lo que provoca que toBlob() lance un SecurityError. Los SVG planos (paths, formas, texto, gradientes, primitivas de filtro) rasterizan con limpieza; si tu origen contiene contenido foreignObject, pre-renderízalo en un editor de escritorio primero. El tamaño de archivo de salida del PNG es típicamente 2–5× mayor que el SVG origen para contenido tipo icono (la rejilla de píxeles del PNG es menos compacta que los paths vectoriales) pero PNG aporta compatibilidad universal y el paso de preservación sin pérdida que JPG no puede ofrecer.
- Origen SVG parseado según W3C SVG 1.1 Second Edition (16 de agosto de 2011) + SVG 2 Candidate Recommendation
- Rasterización del lado navegador vía WHATWG Canvas drawImage con SVGImageElement (secure static / animated mode)
- Ancho y alto de salida personalizados + presets rápidos (1× / 2× / 4× sobre el viewBox del SVG)
- Bloqueo de proporción — preserva las proporciones nativas del viewBox del SVG
- Salida PNG sin pérdida vía HTMLCanvasElement.toBlob('image/png') — cada píxel preservado exactamente
- Canal alfa preservado extremo a extremo — regiones transparentes del SVG → modo RGBA de PNG (precisión de 8 bits)
- La salida PNG usa compresión DEFLATE según RFC 1951 Deutsch (mayo de 1996, LZ77 + Huffman, ventana deslizante de 32 KB)
- Especificación PNG: W3C Recommendation 10 de noviembre de 2003 / ISO/IEC 15948:2004 (formato ráster universal)
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Fuentes (6)
- W3C (SVG Working Group) (2011). Scalable Vector Graphics (SVG) 1.1 (Second Edition). W3C Recommendation 16 August 2011 (w3.org/TR/SVG11/) — source SVG bitstream specification; defines path/shape/text/filter elements and the ViewBox + preserveAspectRatio scaling that lets the same SVG render at 1×, 2×, or 4× target resolutions without precision loss.
- W3C (SVG Working Group) (2018). Scalable Vector Graphics (SVG) 2. W3C Candidate Recommendation 4 October 2018 (w3.org/TR/SVG2/; active development continues as the Editor's Draft at svgwg.org/svg2-draft, last updated September 2025) — successor spec for modern SVG features used by browser-side SVG renderers.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() with SVGImageElement. html.spec.whatwg.org/#dom-context-2d-drawimage + canvas section 4.12.5 — browser rasterisation: load SVG into HTMLImageElement → drawImage at target pixel dimensions → toBlob('image/png') retains every transparent pixel via PNG's RGBA mode. Issue github.com/whatwg/html/issues/10641 (filed September 2024) tracks the normative discussion of SVG-as-Image canvas-tainting interop when the source contains <foreignObject>.
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — target lossless raster format with full alpha channel preserved end-to-end from the SVG's transparent regions.
- 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 applied to the rasterised SVG output.
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; SVG colour values rasterise into sRGB in the PNG output.
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
Por Marco B. ·