PNG vs SVG: ¿qué formato usar para logotipos, iconos y gráficos?

PNG y SVG son formatos populares para logotipos y gráficos — pero funcionan de forma muy diferente. Elegir el incorrecto resulta en un logotipo borroso o un archivo que no se puede abrir en todas partes. Aquí te explicamos cómo decidir.

PNG vs SVG: la diferencia fundamental

• PNG (Portable Network Graphics) es un formato raster — almacena una imagen como una cuadrícula de píxeles. Un PNG de 200×200 tiene exactamente 40.000 píxeles. Ampliarlo hace que se vea borroso.
• SVG (Scalable Vector Graphics) es un formato vectorial — almacena formas como instrucciones matemáticas. Un logotipo SVG se ve perfectamente nítido a cualquier tamaño, desde un favicon (16×16) hasta una valla publicitaria.

Cuándo usar PNG

• Imágenes complejas o fotografías: SVG puede describir formas complejas pero no es práctico para fotos
• Compatibilidad multiplataforma: PNG se abre en todas partes — navegadores, procesadores de texto, correo electrónico, aplicaciones de mensajería
• Cuando necesitas un tamaño de salida fijo: Para publicaciones en redes sociales, impresión a un DPI conocido o assets de UI con píxeles perfectos
• Capturas de pantalla y maquetas de UI: Son raster por naturaleza, PNG es el formato correcto

Cuándo usar SVG

• Logotipos y marcas: Los logotipos SVG permanecen nítidos a cualquier tamaño — cabecera del sitio web, icono de aplicación móvil, folleto impreso
• Iconos: Los iconos de UI en SVG escalan perfectamente en pantallas retina/HiDPI
• Ilustraciones hechas de formas: Gráficos, diagramas, infografías, ilustraciones
• Animaciones: SVG admite animaciones CSS y JavaScript
• Diseño web responsivo: SVG escala automáticamente con la ventana del navegador

Comparación PNG vs SVG

Usar ambos juntos

• Muchos flujos de trabajo usan ambos formatos:
• Conserva el SVG como el archivo maestro del logotipo para editar y escalar
• Exporta versiones PNG en tamaños específicos para redes sociales, presentaciones y correo electrónico
• Usa un PNG 2× (p. ej., 400×400 para un logotipo de 200×200) para pantallas retina
• Si solo tienes un logotipo PNG, usa nuestro Redimensionador para crear versiones de alta resolución y PNG → WebP para uso web.