SVG vs PNG: Imágenes Vectoriales vs Raster
SVG y PNG resuelven problemas fundamentalmente diferentes. SVG almacena imágenes como formas matemáticas que escalan infinitamente sin perder calidad. PNG almacena imágenes como una cuadrícula de píxeles coloreados. Elegir mal cuesta rendimiento o calidad visual.
Qué Hace a SVG y PNG Fundamentalmente Diferentes
La diferencia refleja la distinción entre gráficos vectoriales y raster.
SVG es un formato basado en XML que describe imágenes usando definiciones matemáticas de formas, líneas, curvas y colores. Al hacer zoom, el navegador recalcula y redibuja cada forma. El resultado siempre es nítido.
PNG es un formato raster que almacena imágenes como una cuadrícula de píxeles. Tiene resolución fija. Ampliar más allá de sus dimensiones nativas produce borrosidad y pixelación.
Un Escenario Práctico
Imagina que tienes el logo de tu empresa. Si lo guardas como PNG de 200 × 80 px, se verá perfecto en una página web normal. Pero al imprimirlo en un póster de 1 metro, quedará pixelado e ilegible. El mismo logo guardado como SVG se ve igual de nítido en un favicon de 16 × 16 px que en una valla publicitaria de 5 metros — el navegador y la impresora calculan los vectores a cualquier resolución.
Cuándo SVG es la Mejor Opción
- Logos — un logo necesita verse nítido a cualquier tamaño. SVG lo resuelve con un solo archivo.
- Iconos — iconos de UI, navegación, redes sociales. Ejemplo real: un e-commerce con 50 iconos de categoría de 1,2 MB en PNG redujo a solo 95 KB con SVG.
- Ilustraciones y diagramas — diagramas técnicos, diagramas de flujo, mapas e infografías con líneas limpias.
- Animaciones — SVG se puede animar con CSS o JavaScript para spinners e interacciones ligeras.
- Favicons — los navegadores modernos soportan favicons SVG. Genera los tuyos con nuestro Generador de Favicon.
Según W3Techs, 65,5% de todos los sitios web usan SVG.
Cuándo PNG es la Mejor Opción
- Fotos con transparencia — recortes de producto sobre fondo transparente. (Para fotos sin transparencia, JPEG suele ser mejor.)
- Capturas de pantalla — contienen elementos de UI precisos y texto anti-aliased que son inherentemente raster.
- Arte complejo con muchos colores — pinturas digitales detalladas, texturas e ilustraciones fotorrealistas.
Tamaño de Archivo y Rendimiento
| Tipo de gráfico | PNG | SVG | Ahorro |
|---|---|---|---|
| Icono simple (64×64) | ~25 KB | ~2 KB | 92% |
| Logo (500×200) | ~45 KB | ~8 KB | 82% |
| 50 iconos de categoría | ~1,2 MB total | ~95 KB total | 92% |
| Ilustración simple | ~150 KB | ~20 KB | 87% |
Los SVGs también comprimen excepcionalmente bien con Gzip o Brotli, reduciendo otro 50-70% durante la transferencia. Pueden incrustarse directamente en HTML, eliminando solicitudes HTTP. Para imágenes complejas — fotos, texturas — SVG no ofrece ventajas. Usa PNG, JPEG o WebP y AVIF.
Tabla de Comparación Rápida
| Característica | SVG | PNG |
|---|---|---|
| Tipo de imagen | Vectorial | Raster (cuadrícula de píxeles) |
| Escalabilidad | Infinita | Resolución fija |
| Transparencia | Sí | Sí (canal alfa) |
| Ideal para fotos | No | Sí |
| Ideal para iconos/logos | Sí | Aceptable |
| Animación | Sí (CSS/JS) | No |
| Tamaño típico (icono) | 1-5 KB | 10-50 KB |
Cómo Convertir Entre SVG y PNG
- SVG a PNG — rasteriza SVGs a la resolución que necesites
- Vectorizar Imagen — convierte imágenes raster a SVG
- Generador de Favicon — crea favicons desde cualquier imagen
Nuestra guía de tamaños de archivo lista dimensiones y formatos recomendados por caso de uso.
Preguntas Frecuentes
¿SVG puede reemplazar completamente a PNG?
No. SVG es excelente para gráficos, iconos e ilustraciones, pero no puede representar fotografías eficientemente. Una foto convertida a SVG sería enorme (datos raster incrustados en base64) o perdería todo detalle fotográfico. Usa SVG para contenido vectorial y PNG (o JPEG/WebP) para fotos.
¿Los archivos SVG son seguros para usar en sitios web?
SVG puede contener JavaScript, así que un SVG malicioso podría ejecutar código en el navegador. Si aceptas subidas de SVG de usuarios, siempre sanitiza eliminando etiquetas script y event handlers. Para SVGs que creas tú mismo, no hay riesgo práctico.
¿Por qué algunos SVGs se ven borrosos?
Los SVGs en sí nunca pierden calidad al escalar, pero pueden parecer borrosos si el navegador los renderiza en tamaño fraccional de píxel, si usan imágenes raster incrustadas o si el diseño no se construyó en una cuadrícula de píxeles.
¿Debo usar SVG o icon fonts para iconos web?
SVG es la mejor práctica actual. Icon fonts fueron populares en los 2010, pero tienen problemas de accesibilidad, limitaciones de estilo y la carga de un archivo de fuente completo por unos pocos iconos. SVG inline carga más rápido y es estilizable con CSS.
Convierte tus imágenes ahora
Gratis, privado, todo en tu navegador. Sin subidas, sin cuenta.