SVG vs PNG: La Respuesta Corta
- Usa SVG para logos, iconos, ilustraciones simples, gráficos y archivos para máquinas de corte. Se mantiene nítido a cualquier tamaño y suele ocupar muy poco.
- Usa PNG para fotos, capturas de pantalla y obras detalladas. Conserva cada píxel exactamente y funciona en todas partes.
- Para un logo, conserva ambos: un SVG maestro para impresión y web, y exportaciones PNG para los lugares que no aceptan SVG, como muchas fotos de perfil de redes sociales y firmas de correo.
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
| Característica | SVG | PNG |
|---|---|---|
| Tipo | Vectorial (rutas matemáticas) | Rasterizado (cuadrícula de píxeles) |
| Escalado | Infinito — siempre nítido a cualquier tamaño | Resolución fija — borroso al ampliar |
| Tamaño de archivo (iconos/logos) | 1–20 KB típico | 10–500 KB (depende de la resolución) |
| Tamaño de archivo (fotos) | Enorme (no adecuado) | 500 KB–10 MB (eficiente) |
| Transparencia | Nativa (cualquier forma) | Canal alfa completo (opacidad por píxel) |
| Animación | Sí — CSS, JavaScript, SMIL | No (APNG existe pero con soporte limitado) |
| Estilos CSS | Completo — cambio de colores, tamaños, efectos | No — datos de píxel fijos |
| Texto dentro de la imagen | Buscable y seleccionable | Integrado en píxeles, no buscable |
| Editabilidad | Rutas individuales editables | Solo a nivel de píxel |
| Compresión | Gzip/Brotli (compresión de texto) | Deflate sin pérdida (integrado) |
| Soporte de navegadores | Todos los navegadores modernos (IE9+) | Universal (todos los navegadores) |
| Ideal para | Logotipos, iconos, ilustraciones, gráficos | Fotos, capturas de pantalla, arte complejo |
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
fillostroke— 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
viewBoxpermite al navegador reservar espacio antes de renderizar, evitando cambios de diseño. PNG requiere atributos explícitoswidthyheightpara 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 rutas vectoriales que aproximan esos bordes (el conversor de esta página traza en color y genera rutas poligonales de segmentos rectos). 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. Para una guía paso a paso con consejos para obtener resultados más limpios, consulta cómo vectorizar una imagen.
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.
Herramienta de optimización: SVGOMG es una interfaz basada en navegador para SVGO. Sube tu SVG, activa las opciones de optimización y observa la reducción de tamaño en tiempo real. Sin instalación requerida.
¿SVG o PNG para Cricut?
Elige SVG cuando la máquina tiene que cortar. Cricut Design Space interpreta cada ruta SVG como una línea de corte y mantiene los grupos de color como capas separadas que puedes redimensionar, soldar u ocultar.
Un PNG sirve para Imprimir y luego cortar: Design Space imprime la imagen y corta alrededor de su contorno. Para cortar un diseño PNG en capas separadas, conviértelo antes a SVG.