Referencia · 8 min de lectura
PNG vs SVG: ¿qué diferencia hay y cuál conviene usar?
Un PNG es una cuadrícula de píxeles; un SVG es una lista de formas. Esa única diferencia decide cuán nítido, cuán pequeño y cuán editable es cada uno. Aquí tienes qué es un SVG, por qué un PNG no es un vector y cuándo elegir cada formato.
01 · La respuesta corta
Píxeles frente a formas
Usa SVG para ilustraciones que deben escalar. Usa PNG para todo lo que sea realmente una imagen.
El PNG (Portable Network Graphics) guarda la imagen como una cuadrícula fija de píxeles de colores, comprimida sin pérdidas y con un canal de transparencia opcional. Es un formato de mapa de bits (raster). Si lo amplías, los píxeles simplemente se hacen más grandes, y eso se ve como desenfoque o bordes en escalera. El SVG (Scalable Vector Graphics) guarda la imagen como una descripción de formas («un círculo aquí, esta curva rellena con este degradado, este texto») y el programa que lo muestra lo dibuja de nuevo al tamaño que haga falta. Es un formato vectorial y nunca se ve borroso.
Por eso un logotipo funciona mejor como SVG y una fotografía mejor como PNG, JPG o WebP: un logotipo es de verdad unas pocas formas, y una fotografía es de verdad millones de puntos ligeramente distintos.
| PNG | SVG | |
|---|---|---|
| Tipo | Mapa de bits (píxeles) | Vector (formas), guardado como texto XML |
| Al ampliar | Se vuelve borroso o pixelado | Nítido a cualquier tamaño |
| Tamaño de archivo | Crece con el número de píxeles | Crece con la complejidad; mínimo en logotipos e iconos |
| Fotos y texturas | Bien (pesado en fotos) | Mal: necesita un mapa de bits dentro o se convierte en cartel |
| Transparencia | Sí, alfa completo | Sí, de forma nativa |
| Edición | Píxel a píxel en un editor de fotos | Mover puntos y cambiar rellenos en un editor vectorial o de texto |
| Estilos y animación | Ninguno | CSS, scripts y animación si está en línea en una página web |
| Compatibilidad | En todas partes | Todos los navegadores actuales y herramientas de diseño; irregular en correo y en algunos formularios de subida |
02 · ¿Qué es un SVG?
Una imagen que puedes abrir en un editor de texto
La «S» y la «V» de SVG son toda la idea.
Un archivo SVG es un pequeño documento de texto con un formato estándar del W3C. Ábrelo en el Bloc de notas y verás algo como esto, que es una imagen completa y válida:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#8B5CF6"/>
</svg>Al ser texto, un SVG se puede editar a mano, buscar, comprimir muy bien en un servidor web, generar con un script y seguir en un control de versiones. Al describir formas, admite degradados reales, transparencia parcial, recortes, texto y, cuando está en línea en una página web, estilos con CSS y animación. Un logotipo que pesa 40 KB como PNG de 1000 píxeles suele pesar solo unos pocos kilobytes como SVG.
Dos notas prácticas. Primera: un SVG puede contener scripts, así que abre solo archivos de fuentes de confianza, igual que con cualquier documento; los navegadores no ejecutan scripts de un SVG cargado mediante una etiqueta <img>. Segunda: un SVG puede incrustar un mapa de bits; ese archivo no es realmente un vector y no gana nitidez. Los SVG que crea AnyToSVG solo contienen rutas y degradados, una ruta por color, nunca un mapa de bits incrustado.
03 · ¿PNG es vectorial?
No, y «PNG a vector» significa vectorizar
La imagen de un círculo no es un círculo.
El PNG no es un formato vectorial, por muy nítido que se vea al 100 %. Un logotipo en PNG contiene un millón de píxeles de colores y ningún conocimiento de que algunos formen un círculo, una letra o una curva. No hay ningún ajuste en un editor de fotos que lo convierta en formas: cambiar el nombre de logo.png a logo.svg solo da un archivo roto.
Lo que la gente busca como «PNG a vector» o «PNG a SVG» es vectorizar: un programa analiza los píxeles, encuentra los límites entre zonas de color y los reconstruye como curvas. Con ilustraciones planas (logotipos, iconos, clipart, dibujos de línea, firmas) funciona casi a la perfección, porque las formas estaban ahí para ser encontradas. Con fotografías da un cartel estilizado, porque no hay formas claras, solo tonos graduales. La guía de mapa de bits frente a vector muestra paso a paso lo que la vectorización puede y no puede hacer, y la página de imagen a vector trata los demás formatos de mapa de bits.
04 · Elige SVG cuando…
La ilustración tiene que escalar o editarse
- Logotipos y marcas que aparecen en tamaño de favicon, en la cabecera de una web y en una lona.
- Iconos y gráficos de interfaz para la web: un solo archivo para todas las densidades de pantalla, recoloreable con CSS.
- Ilustraciones, diagramas, gráficos y mapas hechos de formas planas y líneas.
- Archivos de corte para máquinas Cricut, Silhouette, de vinilo y láser, que necesitan contornos y no puntos.
- Diseños para imprimir que se van a ampliar, y todo lo que un diseñador vaya a editar después.
05 · Elige PNG cuando…
La imagen es realmente una imagen
- Capturas de pantalla y todo lo que lleve texto que deba verse exactamente como se renderizó.
- Fotografías y obras con textura o pictóricas: usa PNG cuando necesites transparencia o calidad sin pérdidas, y JPG o WebP cuando importe más el tamaño.
- Vistas previas para redes sociales, firmas de correo e iconos de tiendas de aplicaciones, donde los formularios de subida y los clientes de correo suelen rechazar el SVG.
- Ilustraciones complejas con miles de formas diminutas, donde el SVG pesaría más que el mapa de bits.
- Pixel art, donde los píxeles cuadrados son el propio diseño.
La mayoría de los proyectos acaban usando los dos: un SVG como archivo maestro y exportaciones PNG para los pocos sitios que insisten en mapas de bits.
06 · Convertir
De PNG a SVG, y de vuelta
Una dirección es vectorizar; la otra es simplemente dibujar.
De PNG a SVG: vectorízalo
Suelta el PNG en el convertidor de PNG a SVG (o directamente en el convertidor). Funciona en tu navegador, elige el modo color o blanco y negro, cuenta los colores, detecta los degradados suaves y muestra el SVG junto al original en aproximadamente un segundo. Marca Fondo transparente si el logotipo está sobre un color sólido, baja el control Colores hasta que las muestras coincidan con el diseño y descarga. Para un logotipo en concreto, mira convertir logo a SVG; para un JPG, convertir JPG a SVG.
De SVG a PNG: renderízalo
Esta dirección no necesita vectorizar, solo decidir un tamaño, porque un vector no tiene píxeles hasta que se dibuja. Abre el SVG en un navegador, Inkscape, Figma o Illustrator y exporta un PNG con el ancho que necesites (exporta a 2× o 3× para pantallas de alta densidad). Los botones PNG del convertidor de AnyToSVG hacen exactamente eso con el SVG que acaba de vectorizar, a 1×, 2× o 4×; no son una herramienta general de SVG a PNG.
¿Y la calidad?
De PNG a SVG, el resultado solo es tan bueno como las formas que haya en el PNG. Un logotipo plano de 500 píxeles o más se convierte casi a la perfección; uno diminuto, borroso o fotografiado se convierte en un vector diminuto, borroso o torcido. De SVG a PNG no se pierde nada salvo la resolución que hayas elegido.
07 · Preguntas
PNG vs SVG: preguntas frecuentes
Las preguntas que hay detrás de «qué es un SVG», «¿PNG es vectorial?» y «PNG o SVG». Hay más en las preguntas frecuentes completas.
¿Qué es un archivo SVG?
SVG (Scalable Vector Graphics, «gráficos vectoriales escalables») es un formato de imagen que describe el dibujo como formas (líneas, curvas, rellenos y texto) escritas en texto XML. Como guarda formas y no píxeles, se puede escalar a cualquier tamaño sin perder nitidez, y todos los navegadores modernos lo muestran.
¿Es PNG un formato vectorial?
No. PNG es un formato de mapa de bits: guarda una cuadrícula de píxeles de colores con un tamaño fijo. Un PNG puede contener la imagen de una forma vectorial, pero el archivo en sí no contiene formas. Para obtener un vector hay que vectorizar el PNG, que es lo que hace la conversión de PNG a SVG.
¿Es mejor SVG que PNG?
Para logotipos, iconos, diagramas y otras ilustraciones planas, sí: se mantiene nítido a cualquier tamaño y suele pesar menos. Para fotografías, capturas de pantalla y obras con textura, no: lo adecuado es PNG (o JPG/WebP). Ninguno es mejor en general; sirven para imágenes distintas.
¿Un archivo SVG pesa menos que un PNG?
En ilustraciones sencillas suele pesar mucho menos, porque unas pocas rutas ocupan bastante menos que un millón de píxeles. En imágenes complejas, con muchas formas, degradados o textura, un SVG puede pesar más que el PNG equivalente.
¿Puedo usar SVG en todos los sitios donde uso PNG?
No del todo. Los navegadores, las herramientas de diseño, las máquinas de corte y la mayoría de las webs aceptan SVG. Muchos clientes de correo, formularios de subida de redes sociales, campos de iconos de las tiendas de aplicaciones e imágenes de vista previa Open Graph siguen exigiendo PNG o JPG, así que conserva una exportación en mapa de bits para esos casos.
¿SVG admite transparencia?
Sí. Un SVG tiene el fondo transparente a menos que dibujes uno, y cada relleno puede ser parcialmente transparente. El PNG también admite transparencia alfa completa, y por eso ambos son habituales para logotipos.
¿Cómo convierto un PNG a SVG sin perder calidad?
Vectorizar reconstruye las formas a partir de los píxeles, así que un PNG de colores planos, como un logotipo o un icono, se convierte casi exactamente. Las fotos salen como carteles estilizados. Suelta el PNG en el convertidor de PNG a SVG, revisa la vista Comparar y descarga el SVG.
¿Cómo convierto un SVG a PNG?
Abre el SVG en un navegador, Inkscape, Figma o Illustrator y expórtalo o captúralo al tamaño que necesites. Los botones PNG del convertidor de AnyToSVG generan el SVG que acaba de vectorizar a 1×, 2× o 4×; no son una herramienta general de SVG a PNG.
Sigue leyendo
Más sobre vectores
Pruébalo mientras lees
El convertidor es gratuito, no pide cuenta y muestra el SVG junto a tu original en aproximadamente un segundo.