PNG vs SVG - cuando usar cada formato

Publicado el 19 de abril de 2026

---

PNG y SVG son los dos formatos elegidos para logos, iconos y elementos de UI en la web moderna. Resuelven el mismo problema - imagenes nitidas en cualquier pantalla - pero de formas fundamentalmente diferentes. PNG almacena pixeles; SVG almacena instrucciones de dibujo. La eleccion correcta depende de lo que esta mostrando, a donde va y que tan grande necesita ser la renderizacion final. Esta guia cubre los mecanismos, los compromisos y las cuatro decisiones del mundo real que determinan que formato gana.

Como funciona realmente cada formato

PNG (Portable Network Graphics) es un formato raster. Un archivo PNG almacena una cuadricula de pixeles coloreados - cada pixel tiene un valor explicito de rojo, verde, azul y alfa. Cuando tu navegador o visor de imagen abre un PNG, lee esos valores de pixel del archivo y los pinta en la pantalla a su resolucion nativa. Hacer un PNG mas grande en pantalla estira cada pixel, lo que produce el familiar upscale borroso. Reducir un PNG re-muestrea la cuadricula; dependiendo del algoritmo, los bordes pueden suavizarse.

SVG (Scalable Vector Graphics) es un formato vector. Un archivo SVG es un documento XML que describe formas, lineas, curvas y rellenos. No hay pixeles en la fuente - solo instrucciones como "dibujar un circulo en (20,20) con radio 15, relleno rojo". Cuando el navegador renderiza el SVG, calcula los pixeles al vuelo a la resolucion que la pantalla requiera. El mismo archivo SVG se renderiza nitido a 16×16 para un favicon y a 3000×3000 para una valla publicitaria, sin perdida de calidad.

Comparacion lado a lado

Cuando gana PNG

Fotografias. Una fotografia tiene millones de valores de pixel variando gradualmente - exactamente para lo que un formato raster fue disenado. SVG no puede representar una foto eficientemente; incrustar los pixeles como blob base64 dentro de un SVG anula las ventajas vectoriales. Usa PNG para fotos, o mejor aun, usa JPG o WebP para fotos sin transparencia para recortar mas el tamano de archivo.

Ilustraciones complejas con muchos gradientes, sombras y detalle a nivel de pixel. Si tu icono parece una pequena pintura - sombras suaves, gradientes multi-stop, superposiciones de textura - un PNG del render final aplanado a menudo es mas pequeno que el SVG con los filtros equivalentes.

Capturas de pantalla de UI, texto o codigo. Las capturas de pantalla son inherentemente datos de pixel. PNG preserva la nitidez exacta del texto renderizado y el chrome de UI sin artefactos de compresion con perdidas. Prefiere WebP sin perdidas para ahorrar tamano de archivo si tu audiencia usa navegadores modernos.

Cuando la plataforma objetivo no soporta SVG. Algunos formatos de documento (Word, algunos clientes de email, PowerPoint mas antiguo) aun renderizan SVG de forma inconsistente. Si el destino final no garantiza soporte SVG, exporta el SVG a PNG a la resolucion objetivo primero.

Cuando gana SVG

Logos. Tu logo tiene que verse bien a 24×24 en una pestana del navegador, 200×200 en una pantalla de login y 2000×2000 en una valla de conferencia. Un solo archivo SVG hace los tres con fidelidad perfecta. PNG requiere exportar multiples tamanos (24, 48, 96, 200, 400, 1000, 2000) y seleccionar el correcto por contexto - una carga de mantenimiento.

Iconos en una UI. Los iconos SVG pueden estilizarse con CSS (fill, stroke, opacity, filter) y animarse en hover/focus. El mismo icono hereda el color de texto actual al establecer fill: currentColor. Los iconos PNG requieren archivos separados por variante de color.

Graficos, diagramas e infografias. Cualquier cosa dibujada a partir de formas y texto - organigramas, diagramas de arquitectura, diagramas de flujo, graficos estadisticos - se renderiza limpiamente en SVG y permanece nitido a cualquier nivel de zoom. Hacer zoom en un diagrama PNG rapidamente revela aliasing.

Elementos de UI animados. La animacion SVG via SMIL, transiciones CSS o JavaScript escala mejor que APNG o GIF animado para formas geometricas (spinners de carga, indicadores de estado, microinteracciones). Los tamanos de archivo permanecen pequenos incluso para animaciones complejas.

Las cuatro decisiones reales en el trabajo diario

Logo en un sitio de marketing. → SVG. El mismo archivo maneja header (pequeno), hero (mediano) y exportacion impresa/valla (grande) sin archivos separados ni perdida de calidad. Recurre a un PNG solo si necesitas incrustar el logo en un formato de documento que rechaza SVG.

Icono de app / favicon. → SVG para el maestro; exporta a PNG a 16, 32, 48, 180, 192, 512 para los fallbacks apple-touch-icon y favicon.ico. Ambos archivos van en el bundle desplegado; los navegadores eligen el correcto por contexto.

Foto de producto. → PNG si la transparencia importa (recorte sobre blanco o un fondo con patron); de lo contrario JPG o WebP por la mitad del tamano de archivo. Nunca SVG.

Diagrama o grafico en documentacion. → SVG incrustado en el HTML (asi es ampliable, accesible via texto dentro del SVG y compartible como un solo archivo). Exporta a PNG solo cuando el objetivo es un PDF o Word que no respeta la fidelidad SVG.

Rutas de conversion entre PNG y SVG

PNG → SVG es una operacion de "tracing". El formato objetivo necesita definiciones de forma, asi que un tracer analiza bordes y regiones de color en el PNG y genera rutas vectoriales aproximadas. Los resultados son excelentes para logos e iconos simples (bordes limpios, pocos colores) y pobres para fotos (demasiadas regiones de color para trazar significativamente). Usa PNG to SVG - ajusta el parametro de suavizado, previsualiza e itera hasta que las rutas trazadas coincidan con el original.

SVG → PNG es una operacion de "rasterizado". El navegador (o un conversor) evalua las instrucciones SVG a una resolucion especificada y escribe valores de pixel. Usa SVG to PNG - elige el tamano de salida antes de exportar; a diferencia de la otra direccion, rasterizar es sin perdidas para el tamano objetivo pero significa que te comprometes con una sola resolucion.

Las conversiones de ida y vuelta (SVG → PNG → SVG) componen perdidas en la fase PNG y el trace subsiguiente. Manten la fuente maestra SVG y exporta sabores PNG segun sea necesario; nunca vayas en la otra direccion a menos que no tengas fuente SVG con la que trabajar.

Herramientas relacionadas

• PNG to SVG Converter - traza una imagen raster a un vector escalable.
• SVG to PNG Converter - rasteriza un vector a PNG o WebP en cualquier tamano.
• Compress JPEG - reduce el tamano de archivo de una foto con calidad ajustada por IA.
• Resize Image - establece dimensiones exactas en pixeles con interpolacion bicubica.

← Volver a Image Converter Tools