Comparativa18 de abril de 20265 min de lectura

SVG vs PNG – ¿cuándo vector, cuándo ráster?

SVG y PNG suelen compartir terreno: logos, iconos, gráficos. Pero funcionan de forma muy distinta. SVG es vector, PNG es ráster – y esa diferencia define nitidez, tamaño y flexibilidad.

Vector vs ráster – la diferencia clave

PNG guarda píxeles: una rejilla de puntos de color con resolución fija. Al ampliar verás los píxeles o bordes borrosos. SVG, en cambio, guarda descripciones matemáticas: líneas, curvas, rellenos.

Resultado: un SVG se mantiene nítido a cualquier tamaño, del favicon a una valla. Un PNG necesita idealmente una versión por resolución de destino o al menos un original de gran tamaño.

Cuándo SVG es mejor

Logos, iconos, ilustraciones simples, diagramas: un SVG suele pesar pocos kilobytes, escala libremente y se colorea o anima vía CSS. Navegadores y herramientas de diseño lo soportan sobradamente.

Bonus: los SVG son buscables y accesibles a lectores de pantalla porque son XML. Para iconos inline en una web, suele ser la opción más eficiente.

Dónde PNG sigue ganando

Cuando hablamos de fotos, renders foto-realistas o ilustraciones complejas con cientos de colores y detalles, un SVG se vuelve enorme o directamente inviable. PNG brilla con su representación compacta en píxeles.

Muchas herramientas de oficina, editores antiguos y adjuntos de email manejan mejor PNG. Regla rápida: lo geométrico → SVG, lo pixelado → PNG (o JPG/WebP).

Cuándo SVG se vuelve caro de repente

Los SVG son XML — el navegador los parsea, renderiza y a veces re-renderiza en cada tick de animación. SVG complejos con cientos de paths y filtros pueden consumir más CPU que un PNG equivalente.

Regla: bajo ~5 KB, el SVG sigue siendo barato. A partir de 50 KB comprueba si un PNG 2x o un WebP sería más rápido. Herramientas como SVGO recortan SVG un 30-60 % antes de desplegar.