Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Creé SVG2PNG después de cansarme de los archivos de clientes alojados en servidores aleatorios. Más sobre mí →
Una vez un cliente me envió un PNG de 500KB de su logotipo para la cabecera de un sitio web. Se veía bien a 200px de ancho, pero cuando lo inspeccioné, el original medía 2400px: lo habían exportado de Illustrator con la configuración incorrecta. Lo redibujé como SVG en 10 minutos. El archivo pesaba 3KB y se veía perfecto en cualquier tamaño. No es una metáfora. Es literalmente la razón por la que importa conocer la diferencia entre SVG y PNG.
SVG (Gráficos Vectoriales Escalables, por sus siglas en inglés) describe las imágenes mediante fórmulas matemáticas en lugar de píxeles. Un círculo no se almacena como una cuadrícula de puntos de color — se almacena como «punto central + radio + color de relleno». Esto significa que las imágenes SVG se pueden escalar a cualquier tamaño sin perder nitidez.
PNG (Gráficos de Red Portátiles, por sus siglas en inglés) es un formato de mapa de bits que almacena las imágenes como una cuadrícula de píxeles. Cada píxel tiene un color y una posición definidos. PNG admite compresión sin pérdidas y transparencia a través de un canal alfa, lo que lo convierte en una opción excelente para gráficos web.
| Característica | SVG | PNG |
|---|---|---|
| Tipo de imagen | Vectorial (basado en fórmulas matemáticas) | Mapa de bits (basado en píxeles) |
| Escalabilidad | Infinita, sin pérdida de calidad | Resolución fija |
| Tamaño de archivo | Pequeño para gráficos sencillos, grande para complejos | Mediano a grande |
| Transparencia | Sí | Sí (canal alfa) |
| Capacidad de edición | Se pueden editar rutas, formas y texto con código o editores vectoriales | Solo edición a nivel de píxel |
| Compatibilidad con navegadores | Todos los navegadores modernos | Universal (todos los navegadores, todas las versiones) |
| Ideal para | Logotipos, iconos, diagramas, ilustraciones | Fotografías, capturas de pantalla, archivos de entrega final |
| Calidad de impresión | Perfecta en cualquier tamaño | Depende de la resolución; requiere DPI alto para impresión |
Usa SVG cuando necesites gráficos escalables que se mostrarán en varios tamaños: logotipos, iconos, elementos de UI, gráficos y diagramas. SVG también es ideal si necesitas editar el gráfico posteriormente o animarlo con CSS o JavaScript.
Convierte a PNG cuando necesites compatibilidad universal: clientes de correo electrónico, subidas a redes sociales, software obsoleto, o cuando necesites un archivo de resolución fija para un diseño específico. PNG también funciona mejor para imágenes complejas con degradados, sombras y muchas variaciones de color que harían que los archivos SVG sean excesivamente grandes.
Para sitios web modernos: usa SVG para logotipos e iconos (archivos más pequeños, nítidos en pantallas Retina) y PNG o WebP para fotografías e imágenes destacadas. Los archivos SVG también se comprimen más fácilmente con GZIP, ya que son texto XML.
¿Necesitas convertir entre formatos? SVG2PNG.org te permite convertir SVG a PNG, JPG o WebP al instante en tu navegador — sin necesidad de subir archivos, completamente gratis.
Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Creé SVG2PNG después de cansarme de los archivos de clientes alojados en servidores aleatorios. Más sobre mí →