SVG vs PNG: cuándo usar cada formato para logos e iconos

Para un logo o un icono, la elección entre SVG y PNG cambia mucho el resultado. SVG es vectorial: escala a cualquier tamaño sin pérdida. PNG es raster: cada píxel está definido y si amplías mucho la imagen, se ve pixelada. La decisión correcta depende de dónde y cómo vas a usar el gráfico.

SVG: ideal para logos y gráficos escalables

• Escala a cualquier tamaño sin pérdida: el mismo archivo funciona en un favicon de 16px y en una valla publicitaria.
• Pesa muy poco para gráficos simples (formas, texto, iconos geométricos).
• Se puede editar con cualquier editor vectorial (Illustrator, Inkscape, Figma) y también con código.
• Permite animaciones e interactividad con CSS y JavaScript en web.
• Desventaja: no soporta fotografías bien; para imágenes complejas con muchos colores, el archivo SVG puede pesar más que un JPG.

PNG: mejor para exportaciones y compatibilidad

• Compatible con absolutamente todo: redes sociales, presentaciones, apps, documentos.
• Permite fondo transparente, lo que lo hace ideal para superponer logos sobre otros colores.
• Ideal cuando el gráfico ya está a su tamaño final de uso y no va a escalar.
• Desventaja: si necesitas el logo a distintos tamaños, hay que exportar varias versiones.

Guía rápida de decisión

• Logo en web (cabecera, favicon, emails): SVG si el diseño lo soporta; PNG a 2x resolución como alternativa.
• Logo en presentaciones (PowerPoint, Keynote, Google Slides): PNG a alta resolución.
• Logo para imprimir: SVG o PDF vectorial, nunca PNG a baja resolución.
• Iconos de interfaz: SVG siempre (o fuente de iconos).
• Foto de producto o imagen con muchos detalles: JPG o WebP, no SVG.

¿Tienes PNG y necesitas SVG (o al revés)?

Pasar de PNG a SVG real (vectorial) requiere un programa de trazado como Inkscape o Adobe Illustrator: la conversión automática funciona bien con logos simples (dos o tres colores) pero falla con fotografías o gráficos complejos. En cambio, exportar un SVG a PNG es inmediato desde cualquier editor vectorial o navegador.