SVG vs PNG: Imágenes Vectoriales vs Raster
SVG y PNG resuelven problemas distintos. SVG describe geometría vectorial y puede incrustar ráster; PNG guarda una cuadrícula fija. Elige según arte fuente, seguridad, accesibilidad, edición, renderizado y tamaño medido.
La diferencia central entre SVG y PNG
La distinción corresponde a gráficos vectoriales y ráster.
SVG es XML y describe formas, rutas, texto, filtros, estilos y recursos. Las partes vectoriales se redibujan, pero la nitidez depende de geometría, trazos, efectos, alineación y ráster incrustado.
PNG guarda una cuadrícula fija. Ampliar exige remuestreo y puede suavizar o pixelar. Entregar una fuente mucho mayor añade transferencia y decodificación salvo que candidatos adaptables permitan elegir.
La diferencia afecta tamaño, escala, edición y el contenido que cada formato maneja bien.
Cuándo usar SVG
SVG es buen candidato para arte vectorial revisado con requisitos claros de seguridad, accesibilidad, renderizado e incrustación:
- Logos — un SVG limpio cubre muchos tamaños sin ampliar ráster; marcas pequeñas pueden necesitar simplificación o variante.
- Iconos — UI y navegación comparten geometría y estilo. SVG puede ser menor que varios ráster, pero rutas complejas o repetición inline invierten el resultado.
- Ilustraciones y diagramas — líneas y colores planos. El texto puede ser seleccionable, pero accesibilidad e indexación exigen markup correcto.
- Animaciones — SVG admite CSS, JavaScript y mecanismos propios; revisa movimiento, CPU, CSP, accesibilidad e interacción.
- Favicons — navegadores actuales admiten SVG, pero el conjunto puede necesitar ráster o ICO. Usa el Generador de Favicon.
SVG tiene amplio soporte actual. La popularidad no garantiza que un recurso deba ser vectorial: compara complejidad, seguridad, caché, accesibilidad y renderizado.
Cuándo usar PNG
PNG sirve cuando importan píxeles ráster sin pérdida o alfa y el tamaño cabe en el presupuesto:
- Fotos transparentes — PNG ofrece alfa y píxeles sin pérdida, pero puede ser grande. Compara WebP/AVIF alfa; sin transparencia prueba JPEG y formatos modernos.
- Capturas — PNG conserva píxeles codificados; perfiles, metadatos, escala y paleta son cuestiones separadas.
- Arte complejo — pinturas, texturas e ilustraciones fotorrealistas que no se simplifican en vectores.
- Ráster con texto — PNG evita artefactos con pérdida cuando importa el borde exacto.
Tamaño de archivo y rendimiento comparados
En iconos, logos e ilustraciones simples, SVG o ráster puede ser menor según geometría, dimensiones, repetición, compresión y caché:
| Tipo de gráfico | Tamaño PNG | Tamaño SVG | Ahorro |
|---|---|---|---|
| Icono simple | Un tamaño ráster por candidato | Geometría vectorial a menudo compacta | Mide ambos |
| Logo | Puede exigir varias resoluciones | Suele encajar con fuente vectorial | Mide ambos |
| Colección de iconos | Archivos separados suman solicitudes y bytes | Sprite, externo e inline tienen distinto coste de caché | Mide la página |
| Ilustración simple | Crece con dimensiones y detalle | Crece con rutas, estilos y filtros | Depende del contenido |
Brotli o gzip puede reducir la transferencia SVG según markup y servidor. Compara bytes comprimidos transferidos, no solo el archivo en disco.
SVG inline evita una solicitud, pero aumenta HTML y no tiene caché independiente. SVG externo sí puede almacenarse. El vector suele evitar variantes de densidad; SVG complejo o con ráster puede necesitar respuesta adaptable. Mide la página.
En fotos y texturas, el trazado crea demasiada geometría o pierde detalle. Incrustar ráster en SVG añade contenedor y base64 sin volverlo vector. Usa PNG, JPEG, WebP o AVIF.
SVG vs PNG: comparativa rápida
| Característica | SVG | PNG |
|---|---|---|
| Tipo | Vector (formas y rutas) | Ráster (cuadrícula) |
| Escala | Las partes vectoriales se redibujan; el renderizado importa | Cuadrícula fija; ampliar suaviza |
| Transparencia | Sí | Sí (alfa) |
| Foto | Suele encajar mal salvo ráster incrustado | Opción alfa sin pérdida; compara tamaño |
| Iconos/logos | Fuerte con fuente vectorial revisada | Funciona a dimensiones preparadas |
| Animación | Sí (SVG/CSS/JS) | Extensión APNG |
| Editable con código | Sí (XML) | No |
| Texto y accesibilidad | Posible con markup correcto | Requiere texto o alt equivalente |
| Navegadores | Principales actuales; varía la incrustación | Muy amplio |
| Tamaño | Depende de geometría y markup | Depende de dimensiones y contenido |
Ejemplo práctico: rediseño de un sitio empresarial
Imagina un sitio con logo, 30 iconos, foto principal y capturas del producto. Asigna así:
- Logo → SVG con fuente vectorial limpia; prueba trazos y legibilidad pequeña.
- Iconos → sprite o componentes reutilizan geometría; valida accesibilidad, caché, CSP y markup.
- Foto principal → prueba JPEG, WebP y AVIF con iguales dimensiones y calidad; conserva alternativas. Consulta la guía.
- Capturas → empieza con PNG si debes preservar píxeles y compara otras opciones.
Cómo convertir entre SVG y PNG
Convierte archivos compatibles en el navegador. Vizua procesa el archivo allí y no lo envía a nuestro servidor de imágenes; los servicios de página aún pueden usar la red:
- SVG a PNG — rasteriza a una escala disponible y revisa el resultado
- Vectorizar Imagen — traza rutas aproximadas; no recupera geometría original
- Generador de Favicon — crea salidas habituales desde una fuente compatible
Para dimensiones y presupuestos de bytes, consulta la guía de tamaños.
Preguntas frecuentes
¿SVG puede sustituir totalmente a PNG?
No. SVG sirve para gráficos, iconos e ilustraciones, pero no representa fotos con eficiencia. Una foto en SVG sería enorme como ráster incrustado o perdería detalle al trazarse. Usa SVG para contenido vectorial y PNG, JPEG o WebP para ráster complejo.
¿Es seguro usar SVG en sitios?
SVG es XML activo y puede contener scripts, eventos, referencias externas, enlaces, CSS y filtros. Trata SVG no confiable como código: valida con lista permitida, sanea con una herramienta mantenida, sirve con tipo y aislamiento adecuados y aplica CSP. La procedencia confiable no elimina la revisión.
¿Por qué mi SVG se ve borroso?
La geometría se redibuja sin ampliar ráster, pero alineación fraccional, trazos, filtros, transformaciones, antialiasing, ráster incrustado o pantalla pueden suavizarla. Revisa viewBox, dimensiones, trazos y contenido ráster.
¿SVG o fuente de iconos?
SVG suele encajar porque cada icono puede tener nombre accesible u ocultarse si es decorativo. No es automáticamente más rápido ni accesible: inline aumenta HTML, sprites externos permiten caché y ARIA debe implementarse bien. Compara las necesidades del sistema.
¿Puedo convertir PNG a SVG?
Sí. Vectorizar Imagen de Vizua traza PNG o JPEG en rutas SVG aproximadas. Funciona mejor con logos, iconos e ilustraciones simples de pocos colores y bordes limpios, no con fotografías complejas.
Convierte tus imágenes
Sin cuenta. El archivo se procesa en el navegador y no se envía a nuestro servidor de imágenes.