SVG vs PNG: qué formato usar para logos, iconos y capturas de pantalla
SVG para logos, iconos y formas simples. PNG para capturas de pantalla y arte detallado. El mismo corazón ampliado en ambos formatos, pesos de archivo reales, una tabla de decisión y las respuestas que buscan los diseñadores.
Toda herramienta de diseño hace la misma pregunta al exportar: ¿SVG o PNG? Se ven idénticos al tamaño en el que trabajas, así que la gente elige el que ya viene marcado. La diferencia aparece después, en una pantalla más grande, en una página más lenta o en un color de marca que hay que cambiar. Aquí tienes el mismo icono en ambos formatos, lo que cuesta cada uno y una tabla para los casos que aparecen en todos los proyectos.
Qué cambia de verdad: trazados o píxeles
Un SVG guarda instrucciones: dibuja esta curva, rellénala con este color. Un PNG guarda una cuadrícula de píxeles de color, un valor por punto. Esa única diferencia explica todo lo demás.
Las instrucciones se pueden ejecutar a cualquier tamaño, así que la curva se redibuja suave cada vez. Una cuadrícula tiene un número fijo de puntos, así que una pantalla más grande tiene que estirarlos. SVG es un formato vectorial y PNG es un formato raster. Ambos son estándares abiertos del W3C, y el panel de exportación de Figma ofrece los dos lado a lado.
El mismo corazón, con mucho zoom
A tamaño normal los dos corazones son idénticos. Haz zoom y dejan de ser el mismo archivo.
SVG, con zoom
PNG, con zoom
El corazón de la izquierda se redibuja desde su trazado al nuevo tamaño, así que el borde sigue siendo una curva limpia. El de la derecha es un render de 12 por 12 píxeles del mismo icono ampliado con escalado por vecino más cercano, por eso se ve cada píxel. Las pantallas reales lo hacen más suave, difuminando en lugar de bloquear, pero la causa es la misma: el archivo nunca contuvo ese detalle.
La solución para un PNG es exportarlo más grande, que también es su coste.
Recolorea en código: un archivo, cualquier color
Un SVG es texto. Su color es un atributo, así que una hoja de estilos puede cambiarlo sin una nueva exportación.
.icon { fill: currentColor; }
.icon:hover { fill: #FF3B30; }
Los estados hover, el modo oscuro y los temas de marca se resuelven con una línea cada uno. Un PNG necesita un archivo nuevo por color y por tamaño.
Tamaño de archivo: depende de lo que haya en la imagen
Medimos el corazón de arriba. El SVG pesa 290 bytes. El PNG al mismo tamaño visual crece con los píxeles.
| Icono de corazón | Tamaño |
|---|---|
| SVG (cualquier tamaño) | 290 bytes |
| PNG a 24 px | 393 bytes |
| PNG a 48 px | 739 bytes |
| PNG a 96 px | 1.386 bytes |
| PNG a 192 px | 2.883 bytes |
| PNG a 512 px | 10.400 bytes |
Para formas simples, el SVG se mantiene plano mientras el PNG se multiplica con cada tamaño que entregas. Con imágenes detalladas es al revés. Exportamos una tarjeta de 1200 por 800 con fondo en degradado y una sombra suave: el PNG llegó a 55.365 bytes, un JPG con calidad 80 a 15.248 y un WebP con calidad 80 a 4.970. Los degradados y las sombras suaves son muchos tonos, y un SVG necesitaría un filtro o una cantidad enorme de formas para imitarlos.
Cuándo PNG es la opción correcta
PNG es la elección correcta cuando la imagen no está hecha de formas limpias:
- Capturas de pantalla. Una ventana de navegador o una pantalla completa de una app, con sombras suaves y texto renderizado de verdad, son píxeles por naturaleza. Un PNG los conserva exactos.
- Arte detallado. La textura fina, el grano y el sombreado pintado no se reducen a trazados.
- Imágenes transparentes que no son simples. PNG admite transparencia, así que un recorte con borde suave funciona sobre cualquier fondo.
Una advertencia: un PNG hecho de un logo es un PNG de tamaño fijo. Guarda el SVG como maestro y exporta PNG desde él solo donde algo no pueda leer un SVG.
Cuándo SVG es la opción correcta
- Logos. Un archivo para la cabecera web, el favicon y la valla publicitaria. Consulta formatos de archivo de logo explicados para ver el conjunto completo, incluidos PDF, AI y EPS.
- Iconos. Un set de iconos para barra de pestañas o barra de herramientas, recoloreado por estado con CSS. Lucide, uno de los sets de iconos abiertos más usados, entrega cada icono como SVG.
- Formas simples e ilustraciones. Formas de color plano, divisores, insignias y gráficos.
Donde SVG se queda corto: un archivo con miles de formas se vuelve pesado, y en algunos lugares como clientes de correo, vistas previas al compartir en redes y apps antiguas puede que no se muestre. Usa un PNG ahí.
¿Y las fotos?
Ninguno. Una foto de la cámara de un móvil de 2026 tiene tono continuo, justo lo que los vectores hacen mal y en lo que PNG pesa demasiado. Usa JPG o WebP, que comprimen las fotos mucho mejor que PNG. WebP funciona en los navegadores actuales.
SVG o PNG: una tabla de decisión
| Recurso | Elección | Por qué |
|---|---|---|
| Logo en una web | SVG | Nítido a cualquier tamaño, archivo diminuto |
| Favicon | SVG, más un PNG de respaldo | Los navegadores modernos aceptan SVG, algunos sitios aún piden PNG |
| Set de iconos de UI | SVG | Recolorea por estado con CSS |
| Ilustración con formas planas | SVG | Se mantiene pequeña y nítida |
| Gráfico o diagrama | SVG | Texto y líneas se ven definidos |
| Captura de una app | PNG | Los píxeles son el contenido |
| Arte pintado o con textura | PNG | Demasiado detalle para trazados |
| Imagen con sombra suave y degradado | PNG o WebP | Muchos tonos, un vector pelea contra ello |
| Fotografía | JPG o WebP | El archivo más pequeño con el mismo aspecto |
| Imagen para correo o vista previa social | PNG | Amplio soporte, sin sorpresas con SVG |
FAQ
¿Es SVG mejor que PNG?
Para logos, iconos y formas simples, sí: es más nítido a cualquier tamaño y normalmente más pequeño. Para capturas de pantalla y arte detallado, PNG es el mejor formato. Ninguno gana en todo.
¿Debo usar SVG o PNG para un logo?
SVG. Guárdalo como archivo maestro y exporta PNG desde él para los lugares que no pueden mostrar un SVG, como algunas herramientas de correo y redes sociales.
¿Es SVG más pequeño que PNG?
Para formas simples sí, como muestra el corazón de arriba: 290 bytes frente a entre 393 y 10.400 bytes según el tamaño. Para imágenes detalladas es al revés, porque un SVG necesita muchas formas para describirlas.
¿Puedo recolorear un PNG como un SVG?
No de forma limpia. El relleno de un SVG es un atributo de texto que puedes cambiar en CSS. Un PNG son píxeles ya fijados, así que un color nuevo implica una nueva exportación.
¿Por qué mi PNG se ve borroso al hacer zoom?
Un PNG guarda una cuadrícula fija de píxeles. Cuando se muestra más grande que su propio tamaño, la pantalla estira esos píxeles y los bordes se difuminan o se vuelven bloques. Exporta a un tamaño mayor, o usa SVG si la imagen es una forma simple.
¿Es JPG o WebP mejor que PNG para fotos?
Sí. Comprimen las fotos mucho mejor, así que la página carga más rápido. Reserva PNG para capturas de pantalla, texto nítido y gráficos.
Fuentes
- Scalable Vector Graphics (SVG) 2, W3C.
- Portable Network Graphics (PNG) Specification, W3C.
- Image file type and format guide, MDN Web Docs.
- Tamaños de archivo medidos por nosotros con sharp: un trazado de corazón de 24 por 24 como SVG y como PNG en cinco tamaños, y una tarjeta de 1200 por 800 con degradado y sombra como PNG, JPG y WebP con calidad 80.
- Publicado por primera vez como carrusel en UX Brainy.
Want your logo, icons and UI exported and organized as one system, ready for every screen? Our team designs and hands over the full set.
Get Started
