La diferencia central: matemáticas contra píxeles
Un SVG es un vector. El archivo no almacena una cuadrícula de puntos de color. Almacena instrucciones: dibuja un círculo aquí, rellénalo de azul, traza una línea de este punto a aquel otro. El navegador lee esas instrucciones y pinta la forma de nuevo al tamaño que pidas. Escálalo a una estampilla o a una valla publicitaria y los bordes se mantienen nítidos, porque se recalculan cada vez.
Un PNG es un ráster. Almacena una cuadrícula real de píxeles, cada uno con un color fijo. Esa cuadrícula tiene una resolución establecida. Amplíalo más allá de su tamaño nativo y el navegador tiene que adivinar qué va entre los píxeles, así que los bordes se vuelven suaves y pixelados. PNG también admite transparencia, y por eso supera a JPEG para gráficos que deben ir sobre un fondo de color.
Así que la división es simple. SVG se dibuja a partir de matemáticas y escala sin límite. PNG es una fotografía fija de píxeles y se ve mejor al tamaño en que fue creada.
Dónde gana SVG
Todo lo construido con formas limpias pertenece a SVG. Logos, íconos, elementos de interfaz, arte lineal, gráficas, ilustración plana. Están hechos de trazados y rellenos, exactamente lo que SVG describe mejor, así que el archivo se mantiene diminuto. Un ícono simple puede pesar unos cientos de bytes.
Hay otras dos ventajas importantes. Un SVG sigue siendo editable para siempre, porque las formas siguen siendo formas y no quedan convertidas en píxeles. Puedes reabrirlo, cambiar un color, mover un punto. Y como escala infinitamente, un solo logo SVG sirve para tu favicon, la cabecera de tu sitio web y una pancarta impresa sin una segunda exportación.
Dónde gana PNG
Las fotografías y todo lo que tenga detalle fino, degradados o textura deberían ser PNG. Una foto tiene miles de colores sutilmente distintos a lo largo del encuadre. Describir eso como formas vectoriales sería absurdo, y el archivo sería enorme. Los píxeles son la forma honesta de almacenarlo.
PNG también es la opción segura cuando necesitas un ráster con transparencia, como una foto de producto recortada de su fondo, o una captura de pantalla con esquinas redondeadas. Tiene soporte universal y ningún software lo rechazará jamás.
Una guía rápida para decidir
Usa SVG cuando la imagen sea un logo, ícono, símbolo, gráfica o ilustración plana; cuando necesite escalar a distintos tamaños; o cuando quieras seguir editándola después.
Usa PNG cuando la imagen sea una foto o tenga detalle fotográfico; cuando necesites un ráster de tamaño fijo con transparencia; o cuando entregues un archivo a un sistema que solo acepta píxeles.
Un truco práctico: muchos equipos diseñan un gráfico como SVG y luego exportan un PNG al tamaño exacto que pide una plataforma. Obtienes el archivo maestro limpio y editable, y el archivo plano de entrega, desde la misma fuente.
Editar SVG, exportar ambos
Si trabajas con gráficos vectoriales, ayuda usar una herramienta donde el documento sea genuinamente SVG y no una copia exportada al final. Rayzia es un editor gratuito en el navegador construido exactamente así: el archivo que editas es el SVG. Cuando terminas, puedes exportar SVG para el archivo maestro escalable, o PNG cuando una plataforma pida píxeles. Funciona en cualquier navegador sin instalar nada, así que puedes abrir el editor y probarlo con un archivo real en un minuto.
Preguntas frecuentes
¿Es SVG mejor que PNG?
Ninguno es mejor en general; resuelven problemas distintos. SVG es mejor para logos, íconos e ilustración plana porque escala a cualquier tamaño y sigue siendo editable. PNG es mejor para fotos e imágenes con detalle fino, porque están hechas de píxeles y no de formas. Elige según lo que la imagen realmente sea.
¿Puedo convertir un PNG a SVG?
No de forma limpia en la mayoría de los casos. Un PNG son píxeles, y convertir píxeles de vuelta en formas vectoriales requiere vectorizar, lo que adivina los contornos y rara vez coincide con el original. Funciona razonablemente para gráficos simples de alto contraste, como un logo sencillo, pero no para fotos. Si puedes elegir, conserva el original como SVG desde el principio.
¿Por qué mi logo PNG se ve borroso cuando lo agrando?
Porque un PNG tiene un número fijo de píxeles. Cuando lo amplías más allá de su tamaño nativo, el software tiene que inventar píxeles que nunca existieron, lo que suaviza los bordes. Un logo guardado como SVG evita esto por completo, ya que se redibuja a partir de matemáticas en cada tamaño.
¿SVG admite transparencia como PNG?
Sí. SVG maneja transparencia, opacidad parcial y fusión, y a menudo con más flexibilidad que PNG. La diferencia no es la transparencia sino cómo se almacena la imagen: SVG como formas, PNG como píxeles.