SVG vs PNG para iconos: ¿cuál deberías usar?

Los iconos son casi siempre formas simples de color plano, exactamente lo que los trazados vectoriales representan de forma eficiente. Un icono en SVG se mantiene nítido tanto si se renderiza a 16px como a 160px, y un único archivo cubre todos los tamaños que un diseño responsivo pueda necesitar, en lugar de exportar PNG independientes para cada resolución.

Como el relleno y el trazo de un SVG son solo atributos, puedes recolorear un icono con CSS para adaptarlo a un estado hover o al modo oscuro, sin necesitar un segundo archivo de imagen. Los colores de un icono PNG están fijados en sus píxeles, así que un color distinto significa un archivo exportado completamente aparte.

Si un "icono" es en realidad una imagen pequeña de tipo fotográfico o muy detallada, como un icono de app realista con degradados, sombras y textura, el PNG puede reproducir ese detalle de forma más fiel que un trazado vectorial. Sin embargo, para iconos puramente gráficos y de color plano, el SVG es casi siempre la mejor opción. Si partes de un conjunto de iconos PNG ya existente, puedes convertirlo a SVG y tener ambos formatos disponibles.