SVG vs PNG: Guía Completa
de Comparación

La Diferencia Fundamental

PNG (Portable Network Graphics) es un formato rasterizado. Almacena imágenes como una cuadrícula de píxeles de colores. Cada píxel tiene una posición, un color y una opacidad fijos. El número total de píxeles — la resolución — determina cuánto detalle puede contener la imagen. Un PNG de 1000×1000 contiene exactamente 1 millón de valores de píxel. Al ampliar la imagen más allá de su resolución nativa, el software debe interpolar (inventar) nuevos píxeles entre los existentes, lo que produce un resultado borroso.

SVG (Scalable Vector Graphics) es un formato vectorial. Describe imágenes mediante definiciones matemáticas: rutas, curvas, formas, líneas y rellenos. Un círculo se almacena como una coordenada central y un radio — no como miles de píxeles ordenados. Dado que la imagen se define mediante ecuaciones en lugar de una cuadrícula de píxeles fija, puede renderizarse a cualquier tamaño con nitidez perfecta. El motor de renderizado simplemente recalcula las matemáticas para las dimensiones de destino.

No se trata de que un formato sea "mejor" que el otro. Se trata de que cada formato está diseñado para tipos de contenido diferentes. PNG destaca en la representación de contenido fotográfico y rasterizado complejo. SVG destaca en la representación de gráficos geométricos, logotipos, iconos e ilustraciones.

Comparación Completa

Cuándo Usar SVG

SVG es la opción óptima para cualquier gráfico fundamentalmente geométrico — compuesto de formas, líneas y curvas en lugar de datos de píxeles fotográficos.

Logotipos y Marca

Un logotipo de empresa aparece en todas partes: favicon del sitio (16px), imagen de cabecera (200px), tarjeta de visita (300 DPI en impresión), banner de feria (10 metros). Servir un PNG para cada tamaño implica mantener múltiples archivos, cada uno con una resolución diferente. Con SVG, mantienes un único archivo que se renderiza perfectamente a cualquier tamaño. CSS puede cambiar el color del logotipo al pasar el cursor, en modo oscuro o en impresión. Y el archivo suele pesar entre 2–15 KB — más pequeño incluso que la versión PNG más pequeña.

Iconos y Elementos de Interfaz

Los conjuntos de iconos (navegación, redes sociales, iconos de funciones) son candidatos ideales para SVG. Cada icono es una forma geométrica simple que se beneficia de:

• Independencia de resolución: Nítido en pantallas 1x, 2x y 3x sin necesidad de servir múltiples PNGs
• Estilos CSS: Cambia colores con las propiedades fill o stroke — sin necesidad de variantes de icono separadas
• Animación: Efectos al pasar el cursor, spinners de carga, microinteracciones
• Tamaño de archivo mínimo: Un SVG de icono típico pesa entre 200–500 bytes. Un conjunto de 50 iconos incrustados en HTML añade menos de 25 KB en total.

Ilustraciones Planas e Infografías

Las ilustraciones con colores sólidos, bordes limpios y formas geométricas se traducen de forma natural al formato vectorial. Las ilustraciones de marketing, las pantallas de incorporación y las infografías suelen diseñarse con herramientas vectoriales (Illustrator, Figma) y exportarse como SVG. El resultado es nítido a cualquier ancho de ventana, personalizable con CSS y drásticamente más pequeño que los PNGs equivalentes en alta resolución.

Gráficos y Visualizaciones de Datos

Los gráficos de barras, líneas, sectores y las visualizaciones de datos interactivas son naturalmente vectoriales. Bibliotecas como D3.js, Chart.js y Highcharts renderizan directamente a SVG. El resultado es independiente de la resolución, interactivo (tooltips, eventos de clic) y accesible (los lectores de pantalla pueden analizar el DOM de SVG).

Diseño Web Adaptable

SVG se adapta automáticamente a cualquier tamaño de contenedor. Una ilustración de héroe que ocupa 1200px en escritorio y 360px en móvil usa el mismo archivo SVG. El navegador recalcula las matemáticas vectoriales a cada tamaño. PNG requiere servir imágenes sobredimensionadas (desperdiciando ancho de banda en móvil) o múltiples variantes con srcset (más complejidad y más archivos por mantener).

Cuándo Usar PNG

PNG destaca en la representación de contenido inherentemente rasterizado — contenido capturado o creado como píxeles que no puede reducirse de manera significativa a formas geométricas.

Fotografías

Una fotografía contiene millones de valores de color únicos con gradientes suaves y continuos en tonos de piel, cielo, follaje y tela. El formato vectorial no puede representar estos datos de manera eficiente. Convertir una foto a SVG produciría miles de rutas diminutas, creando un archivo entre 10–100 veces más grande que el PNG y con peor aspecto. Para contenido fotográfico, PNG (sin pérdida) o JPEG (con pérdida, más pequeño) son las opciones correctas.

Capturas de Pantalla e Interfaz

Las capturas de pantalla contienen texto renderizado, elementos de interfaz, degradados y bordes suavizados mezclados como píxeles. La disposición específica de los píxeles importa. PNG la preserva exactamente. Vectorizar una captura de pantalla produciría una interpretación poco fiable de los datos de píxel, no una reproducción fiel.

Arte Digital Complejo

Las pinturas digitales, efectos de acuarela, ilustraciones con texturas intensas y obras con miles de colores y degradados se sirven mejor como PNG. Aunque el original pueda haberse creado con algunos elementos vectoriales, la salida renderizada final con sus mezclas, efectos y texturas es fundamentalmente datos rasterizados.

Renderizado Píxel Perfecto

Cuando la colocación exacta de los píxeles importa — pixel art, hojas de sprites, recursos de juegos de baja resolución — PNG es el formato correcto. El renderizado SVG implica suavizado y cálculos de subpíxel que pueden desplazar elementos fracciones de un píxel, lo que destruye la alineación precisa que requiere el pixel art.

Comparación de Rendimiento Web

Elegir el formato adecuado para cada recurso impacta directamente en la velocidad de carga de tu sitio y en las puntuaciones de Core Web Vitals.

Tamaño de Archivo

Para iconos y logotipos, SVG gana de forma decisiva. Un icono típico:

• SVG: 200–800 bytes (texto plano, se comprime a 100–400 bytes con gzip)
• PNG @1x: 1–5 KB
• PNG @2x (Retina): 3–15 KB
• PNG @3x (Hi-DPI): 5–25 KB

Servir un único SVG reemplaza tres archivos PNG mientras pesa menos que el más pequeño. Para un sitio con 20 iconos, esto ahorra entre 100–400 KB de datos de imagen.

Para logotipos:

• SVG: 2–15 KB (gzipped: 1–8 KB)
• PNG @2x: 20–200 KB

Compresión (Gzip/Brotli)

SVG es texto XML, que se comprime excepcionalmente bien con gzip (reducción del 50–70%) y Brotli (reducción del 60–80%). Los servidores web comprimen SVG al vuelo, por lo que el tamaño de transferencia es mucho menor que el archivo en disco. PNG tiene compresión deflate integrada y no se beneficia significativamente de gzip/Brotli adicional.

Ventaja del SVG Inline

SVG puede incrustarse directamente en HTML con una etiqueta <svg>, eliminando por completo la solicitud HTTP. Para iconos y logotipos críticos above-the-fold, esto puede mejorar el Largest Contentful Paint (LCP) porque el navegador no necesita esperar una descarga de imagen separada. PNG siempre requiere una solicitud HTTP separada (o un data URI, que aumenta el tamaño del HTML en ~33%).

Google Core Web Vitals

Tres métricas clave se ven afectadas por la elección del formato de imagen:

• LCP (Largest Contentful Paint): Los archivos de imagen más pequeños cargan más rápido. Los logotipos e iconos SVG contribuyen menos al LCP que los PNGs de alta resolución.
• CLS (Cumulative Layout Shift): SVG con dimensiones explícitas viewBox permite al navegador reservar espacio antes de renderizar, evitando cambios de diseño. PNG requiere atributos explícitos width y height para el mismo beneficio.
• INP (Interaction to Next Paint): Menos solicitudes de imagen significan menos trabajo en el hilo principal. El SVG inline reduce la sobrecarga HTTP.

Conversión Entre Formatos

PNG a SVG (Vectorización)

Convertir PNG a SVG es un proceso de vectorización (trazado). El conversor analiza los límites de los píxeles, detecta bordes y genera curvas de Bézier que aproximan esos bordes como rutas matemáticas. Esto funciona bien para:

• Logotipos con colores sólidos sobre fondos limpios
• Arte lineal, bocetos y diseños dibujados a mano
• Iconos e ilustraciones simples
• Texto y tipografía

No funciona bien para fotografías, degradados complejos o texturas detalladas. El resultado es una interpretación, no una copia exacta a nivel de píxel.

SVG a PNG (Rasterización)

Convertir SVG a PNG es una rasterización — renderizar las rutas matemáticas a una resolución de píxel específica. Es un proceso sencillo sin pérdida de calidad a la resolución elegida. Solo debes especificar las dimensiones de destino y el renderizador rellena los píxeles. Herramientas como ImageMagick, Inkscape y cualquier navegador web pueden rasterizar SVG a PNG.

Razones habituales para convertir SVG a PNG:

• Plataformas de redes sociales que no aceptan cargas SVG
• Clientes de correo electrónico con soporte SVG deficiente
• Software antiguo que solo admite formatos rasterizados
• Generar miniaturas de resolución fija para galerías de imágenes

Consejos de Optimización SVG

Los archivos SVG exportados desde herramientas de diseño suelen contener datos innecesarios que aumentan el tamaño del archivo sin afectar la salida visual. La optimización puede reducir el tamaño de los archivos SVG en un 60–80%.

Eliminar Metadatos del Editor

Illustrator, Figma y Sketch incrustan metadatos propietarios, comentarios e información del generador en los SVGs exportados. Estos datos son invisibles para los navegadores pero pueden representar el 30–50% del archivo. Herramientas como SVGO (SVG Optimizer) los eliminan automáticamente.

Simplificar Rutas

Los editores vectoriales suelen crear rutas con más puntos de control de los visualmente necesarios. Reducir el número de puntos en cada ruta (simplificación de rutas) puede encoger el SVG drásticamente mientras produce una salida visualmente idéntica. En Inkscape, usa Trayecto > Simplificar (Ctrl+L). El plugin convertPathData de SVGO lo gestiona automáticamente.

Minificar el XML

Elimina espacios en blanco, saltos de línea y atributos innecesarios. Convierte coordenadas de ruta absolutas a relativas (cadenas más cortas). Elimina valores de atributos predeterminados. SVGO gestiona todas estas optimizaciones en un único pase.

Usar Símbolos SVG para Conjuntos de Iconos

Si usas múltiples iconos en una página, defínelos una vez en un sprite SVG <symbol> y referencialos con <use>. Esto evita duplicar los mismos datos de ruta en toda la página.