SVG vs PNG para logos: qué formato usar (y cuándo)
Para un logo, mantén el maestro como SVG y úsalo en cualquier lugar donde el formato esté admitido — se mantiene nítido a cualquier tamaño y pesa casi nada. Recurre a PNG solo cuando necesites una imagen raster de tamaño fijo o un lugar que no acepte SVG, como la mayoría de los perfiles sociales. Para impresión, entrega un PDF o EPS vectorial. Nunca uses JPG para un logo.
En esta página
¿Cuál es la diferencia entre SVG y PNG?
La diferencia es vector vs raster. Un SVG (Scalable Vector Graphics) describe un logo como formas — puntos, curvas y rellenos — definidas por matemáticas. Se vuelve a dibujar al tamaño en que aparece, así que se mantiene nítido en todas partes. Al ser código, también es diminuto para la geometría limpia de la mayoría de los logos, a menudo solo unos pocos kilobytes.
Un PNG (Portable Network Graphics) es una imagen raster: una cuadrícula fija de píxeles con un ancho y un alto determinados. Admite transparencia, así que un logo se asienta con limpieza sobre cualquier color — pero mostrado más grande de lo exportado, los píxeles se estiran y los bordes se suavizan.
¿Cuándo deberías usar SVG?
Haz del SVG tu archivo maestro y tu opción por defecto para cualquier cosa en pantalla:
- Sitios web y aplicaciones web — el logo en la cabecera, el pie y el hero. Los navegadores modernos renderizan el SVG perfectamente nítido en cada pantalla, incluidas retina y 4K.
- Cualquier lugar donde el logo deba escalar — diseños responsivos y pantallas de alta densidad.
- Como la única fuente desde la que exportas todo lo demás.
- Favicons, ya que los navegadores modernos aceptan un favicon SVG.
¿Cuándo deberías usar PNG?
Usa PNG cuando necesites un raster de tamaño fijo o un lugar que no acepte SVG:
- Fotos de perfil e imágenes de portada de redes sociales — la mayoría de las plataformas solo aceptan subidas raster, así que exporta un PNG cuadrado al tamaño que cada una recomienda.
- Algunos clientes de correo y herramientas de firma que no renderizan SVG de forma fiable.
- Documentos, presentaciones y marketplaces que solo aceptan imágenes raster.
- Vistas previas rápidas y miniaturas.
SVG vs PNG de un vistazo
| Lo que importa | SVG (vector) | PNG (raster) |
|---|---|---|
| Escalado | nítido a cualquier tamaño | tamaño fijo; se emborrona al ampliar |
| Tamaño (logos) | diminuto para marcas simples | crece con las dimensiones |
| Transparencia | sí | sí |
| Editabilidad | formas y colores siguen editables | píxeles aplanados |
| Mejor para | web, archivo maestro, escalado | avatares, raster de tamaño fijo |
| Compatibilidad | navegadores y herramientas de diseño | aceptado casi en todas partes |
¿Y EPS, PDF, AI — y JPG?
SVG y PNG cubren la web, pero un paquete de logo completo suele incluir un par más:
- PDF — un formato vectorial que acepta casi cualquier imprenta y herramienta de oficina. Es el archivo más seguro para entregar a una imprenta.
- EPS — un formato vectorial más antiguo que algunas imprentas todavía piden. Trátalo como una exportación de compatibilidad para impresión, no como algo de uso diario.
- AI (Adobe Illustrator) — un archivo de trabajo/fuente. Si un diseñador hizo tu logo, guarda el AI (o el SVG) archivado como el original editable.
- JPG — evítalo para logos. JPG no tiene transparencia, así que fuerza una caja de fondo alrededor de la marca, y su compresión tiene pérdida, lo que emborrona los bordes nítidos. Está hecho para fotos, no para logos.
Conserva el SVG como tu única fuente de verdad. Cada PNG, favicon, PDF e imagen social debería exportarse a partir de él — nunca al revés. Trazar un PNG de vuelta a un vector rara vez coincide con el original.
¿Se puede convertir un PNG de nuevo a SVG?
No con limpieza. Convertir un PNG a SVG significa trazar los píxeles en formas, lo que rara vez coincide con el original y a menudo produce trazados desordenados. Si tienes el SVG, empieza siempre ahí. Si todo lo que tienes es un PNG de baja resolución, suele ser mejor reconstruir la marca como vector que trazarla automáticamente.
¿Y los favicons y los iconos de apps?
Un favicon es solo una versión muy pequeña de tu logo, así que expórtalo desde el SVG: un favicon SVG para los navegadores modernos, más PNG pequeños (por ejemplo 32×32 y un Apple touch icon de 180×180) para amplia compatibilidad. La misma regla se aplica a los iconos de apps — genera los tamaños que pide cada plataforma a partir del maestro vectorial. Consulta cómo crear un favicon desde tu logo.
La respuesta corta
Diseña y guarda tu logo como SVG, úsalo en la web, exporta PNG para ubicaciones raster de tamaño fijo, entrega a las imprentas un PDF o EPS y salta el JPG por completo. Conserva el maestro vectorial y podrás producir cualquier tamaño o formato más tarde sin perder calidad.
Crea un logo y exporta SVG, PNG y faviconPreguntas frecuentes
¿Es mejor SVG que PNG para logos?
Para un logo, normalmente sí: SVG es un vector, así que se mantiene nítido a cualquier tamaño y es diminuto para marcas simples. PNG sigue siendo útil para ubicaciones raster de tamaño fijo, como avatares sociales y herramientas que no pueden leer SVG.
¿Pierde calidad un logo SVG al escalarlo?
No. SVG describe las formas con matemáticas, así que se vuelve a renderizar con nitidez a cualquier tamaño — desde un favicon hasta una valla publicitaria — sin volverse nunca borroso ni pixelado.
¿Por qué se ve borroso mi logo PNG?
Un PNG tiene un tamaño de píxeles fijo. Mostrarlo más grande de lo exportado, o en una pantalla de alta densidad, estira esos píxeles y suaviza los bordes. Exporta un PNG más grande, o usa el SVG.
¿Debería usar JPG para un logo?
No. JPG no tiene transparencia (así que añade una caja de fondo) y tiene pérdida, lo que emborrona los bordes nítidos de una marca. Usa SVG o PNG para logos, nunca JPG.
¿Qué formato le doy a una imprenta?
Un archivo vectorial — normalmente un PDF o EPS exportado de tu logo — para que la imprenta pueda escalarlo a cualquier tamaño con limpieza. Guarda el SVG como el maestro del que los generas.
Fuentes
- Scalable Vector Graphics (SVG) 2 — W3C
- Image file type and format guide — MDN Web Docs