PNG vs SVG: ¿Cuál es la diferencia?
PNG y SVG son dos formatos de imagen muy comunes en la web, pero almacenan una imagen de formas fundamentalmente distintas. Entender la diferencia te ayuda a elegir el formato correcto para un logotipo, un icono, una foto o un archivo de corte.
¿Qué es un archivo PNG?
Un archivo PNG (Portable Network Graphics) es una imagen rasterizada: una cuadrícula fija de píxeles de colores, similar a un JPEG. Cada píxel almacena su propio valor de color, y el número total de píxeles queda fijado en el momento en que se crea el archivo. El PNG también admite transparencia alfa real, por lo que es el formato estándar para iconos, capturas de pantalla y logotipos con fondos transparentes.
Como un PNG no es más que una cuadrícula de píxeles, ampliarlo significa estirar esos mismos píxeles sobre un área mayor, que es exactamente lo que provoca el desenfoque o el efecto de "bloques" visibles cuando escalas un PNG más allá de sus dimensiones originales.
¿Qué es un archivo SVG?
Un archivo SVG (Scalable Vector Graphics) describe una imagen como un conjunto de formas y trazados matemáticos (líneas, curvas y rellenos) en lugar de píxeles individuales. Un círculo se almacena como "un círculo con este radio", no como miles de puntos de color individuales.
Eso es lo que hace que los SVG sean infinitamente escalables: un navegador o una herramienta de diseño redibuja las formas desde cero al tamaño que necesites, así que un logotipo en SVG se ve igual de nítido en el icono de un teléfono que en una valla publicitaria. Los SVG también son texto plano (XML), por lo que son editables en cualquier editor de texto o herramienta de diseño vectorial.
PNG vs SVG: diferencias clave
| PNG | SVG | |
|---|---|---|
| Datos subyacentes | Cuadrícula de píxeles | Trazados y formas matemáticas |
| Escalado | Pierde calidad por encima de su tamaño original | Escala a cualquier tamaño sin perder calidad |
| Tamaño de archivo | Mayor para gráficos simples | Normalmente menor para logotipos/iconos |
| Editabilidad | Solo edición de píxeles (Photoshop, etc.) | Las formas son editables directamente (Illustrator, Inkscape) |
| Transparencia | Compatible (canal alfa) | Compatible (relleno/opacidad) |
| Ideal para | Fotografías, texturas complejas | Logotipos, iconos, ilustraciones, archivos de corte |
Cuándo usar PNG y cuándo usar SVG
Como regla general:
- Usa SVG para logotipos, iconos, dibujos lineales y cualquier cosa que necesite redimensionarse o cortarse, incluidos los archivos para proyectos de Cricut y cortadoras láser.
- Usa PNG para fotografías e imágenes con degradados o texturas complejas que no se reducen bien a formas planas.
- Si ya tienes un logotipo o icono en PNG y necesitas un SVG, no hace falta redibujarlo a mano: puedes vectorizarlo automáticamente. Consulta cómo funciona el trazado de imágenes para más detalles.
Preguntas frecuentes
¿Puedo simplemente renombrar un archivo PNG con extensión .svg?
No. Cambiar la extensión del archivo no modifica los datos subyacentes: la cuadrícula de píxeles de un PNG tiene que vectorizarse en trazados para convertirse realmente en un SVG.
¿El SVG es siempre mejor que el PNG?
No para todos los casos de uso. El SVG es mejor para gráficos escalables como logotipos e iconos, pero el PNG (o el JPEG) sigue siendo la opción correcta para fotografías, donde un trazado vectorial perdería detalle realista.
¿Los navegadores admiten SVG igual que PNG?
Sí. Todos los navegadores modernos renderizan SVG de forma nativa, y puede usarse en cualquier lugar donde funcione una etiqueta <img> o un background-image en CSS.
Guías relacionadas
Una mirada más profunda a la distinción entre raster y vector, más allá del PNG y el SVG.
Convierte un diseño PNG en un SVG listo para cortar en Cricut Design Space.