SVG vs PNG: cuándo usar imágenes vectoriales en la web
SVG y PNG admiten transparencia, pero funcionan de manera muy distinta. Aprende cuándo elegir vector (SVG) frente a rasterizado (PNG) — y cuándo no.
SVG y PNG son habituales para logos, iconos y gráficos web, y ambos admiten transparencia. Pero funcionan de manera fundamentalmente distinta: elegir el equivocado puede traducirse en logos borrosos, archivos innecesariamente grandes o gráficos que se ven mal en pantallas de alta densidad.
La diferencia esencial: vector frente a rasterizado
PNG es un formato rasterizado. Guarda la imagen como una rejilla fija de píxeles — un número concreto de puntos con colores definidos. Si la amplías más allá de su tamaño original, se vuelve borrosa, porque no hay más píxeles con los que rellenar el detalle.
SVG es un formato vectorial. Guarda la imagen como instrucciones matemáticas: dibuja un círculo aquí, rellénalo con este color, traza una línea del punto A al B. Al escalarla a cualquier tamaño se vuelve a renderizar perfectamente nítida, porque las instrucciones siempre producen un resultado limpio.
Cuándo usar SVG
Logos. Un logo corporativo tiene que verse nítido en una tarjeta de visita, en una web, en una valla y en una pantalla móvil — todos a tamaños diferentes. SVG cubre todos los casos con un solo archivo.
Iconos y elementos de UI. Los iconos de navegación, los botones y la gráfica de interfaz casi siempre van mejor en SVG. Pesan poquísimo, se ven nítidos en pantallas Retina y HiDPI, y se pueden estilar y colorear con CSS.
Ilustraciones con colores planos o degradados. Gráficos, diagramas, infografías e ilustraciones geométricas son territorio natural del SVG.
Gráficos sencillos donde el peso importa. Un logo SVG simple puede pesar 2–5 KB. La misma imagen como PNG en alta resolución puede subir a 50–200 KB.
Cuándo usar PNG
Fotografías e imágenes complejas. La fotografía contiene millones de colores y transiciones suaves; representarla como rutas vectoriales no es práctico. Mejor PNG (o JPG / WebP).
Capturas de pantalla. Las capturas son intrínsecamente rasterizadas, capturadas píxel a píxel. PNG conserva cada píxel exactamente.
Imágenes con píxeles semitransparentes. PNG admite alpha completo, incluida la transparencia parcial, algo que SVG maneja peor en imágenes complejas.
Cuando SVG no está bien soportado. Algunos clientes de correo y aplicaciones antiguas no renderizan SVG de forma fiable; PNG es el plan B seguro.
Tabla comparativa
| SVG | PNG | |
|---|---|---|
| Escala sin perder nitidez | Sí | No |
| Fondo transparente | Sí | Sí |
| Mejor para | Logos, iconos, ilustraciones | Fotos, capturas |
| Peso (gráficos sencillos) | Muy pequeño | Más grande |
| Editable con código o CSS | Sí | No |
| Compatibilidad en clientes de correo | Limitada | Universal |
Convertir SVG a PNG
A veces necesitas una versión PNG de un SVG — para correo, para una plataforma que no admite SVG o para generar un tamaño concreto en píxeles para iconos o redes sociales:
- SVG a PNG: exporta tu SVG como PNG en cualquier tamaño.
- SVG a JPG: convierte a JPG (atención: pierde la transparencia).
- SVG a WebP: formato moderno con soporte de transparencia.
Preguntas frecuentes
¿Puedo editar un SVG como una imagen normal? Los SVG son archivos XML de texto. Puedes abrirlos en un editor de texto o en una herramienta vectorial como Figma, Illustrator o el gratuito Inkscape. También se pueden estilar directamente con CSS en la web.
¿El logo de mi web debería ser SVG o PNG? SVG, casi siempre. Es nítido a cualquier resolución, pesa mucho menos y puedes cambiar su color con CSS sin tocar el archivo.
Mi SVG se ve bien, pero el PNG exportado sale borroso. ¿Por qué? Al convertir SVG a PNG, las dimensiones de salida importan. Una exportación de 100×100 px se verá borrosa en una pantalla Retina 2×. Exporta al doble del tamaño de visualización (200×200 px para mostrarse a 100×100) para obtener un resultado nítido.