Mapa de bits frente a vectorial
Las imágenes se dividen en dos tipos:
- Mapa de bits (JPEG/PNG/WebP): formados por puntos de píxel; al ampliarlos hasta cierto punto se vuelven borrosos y aparecen como mosaico
- Vectorial (SVG): descrito por rutas matemáticas; por mucho que se amplíe sigue nítido
Entender esta diferencia esencial te dice en qué casos encaja el SVG.
Principales ventajas de SVG
Escalado infinito sin pérdida
SVG describe el gráfico con rutas, curvas y formas, no con píxeles. Ampliado a cualquier tamaño se mantiene nítido y claro, sin mosaico. Es la mayor ventaja de SVG, ideal para iconos y logos que se usan en múltiples tamaños.
Tamaño pequeño (para gráficos sencillos)
Para iconos y logos sencillos, el archivo SVG es mucho más pequeño que el PNG equivalente. Un logo limpio en PNG puede ocupar de unos pocos KB a decenas de KB; en SVG puede ser de 1~2 KB. Pero las imágenes complejas tipo foto no son adecuadas para SVG.
Editable con código
SVG es en esencia texto XML, por lo que puedes cambiar color, forma y texto directamente con un editor de texto. El frontend puede controlar el color con CSS y modificarlo dinámicamente con JS, algo imposible con mapas de bits.
Soporta animación
SVG admite animación integrada y animaciones CSS/JS. Las animaciones de carga y los efectos interactivos de iconos implementados con SVG son ligeros y fluidos.
Permite búsqueda e indexación
El texto dentro de SVG es texto real, indexable por los buscadores y legible por lectores de accesibilidad, más amable que el texto dentro de una imagen.
Para qué es adecuado SVG
- Iconos: iconos de navegación, de función; primera elección en diseño de UI
- Logos: el logo de marca se usa en varios tamaños, el vectorial es el más adecuado
- Ilustraciones: ilustraciones planas, gráficos decorativos
- Gráficos: los gráficos de visualización de datos en vector se ven nítidos al escalar
- Fuentes de iconos: la esencia de una fuente de iconos es SVG
Para qué no es adecuado SVG
- Fotos: las fotos tienen colores ricos y mucho detalle; describirlas en vector hace que el tamaño explote y se distorsione. Usa JPEG/WebP
- Degradados y texturas complejas: degradados y texturas excesivamente complejos hacen grande el SVG, peor que un mapa de bits
- Cuando se necesitan filtros: los filtros complejos son más eficientes en mapa de bits
Limitaciones de SVG
Problemas de compatibilidad en casos extremos
Los navegadores modernos soportan SVG por completo, pero algunos entornos antiguos y algunos clientes de correo lo manejan mal. Prueba en los casos importantes.
Las imágenes complejas salen más grandes
Convertir una foto a SVG la hace enorme y distorsionada. SVG no lo hace todo; solo sirve para gráficos vectoriales.
Coste de aprendizaje
Diseñar SVG requiere habilidades de dibujo vectorial; no se obtiene simplemente haciendo una foto como con los mapas de bits. Pero usar recursos SVG ya hechos o herramientas de mapa de bits a SVG reduce la barrera de entrada.
De mapa de bits a SVG
Convertir un mapa de bits (por ejemplo PNG) a SVG es un proceso de "trazado": la herramienta reconoce los límites de las formas en la imagen y genera rutas vectoriales aproximadas.
Usa la herramienta de imagen a SVG:
- Sube el mapa de bits (se recomienda una imagen sencilla y de alto contraste, como un logo)
- La herramienta traza y genera el SVG
- Descarga el SVG
Notas sobre la conversión
- Los gráficos sencillos (logos, iconos) quedan bien al convertirlos a SVG
- Las fotos y las imágenes complejas salen distorsionadas y grandes; no se recomienda
- Revisa tras la conversión si los bordes son suaves y los colores precisos
- El SVG resultante puede optimizarse más con un editor de texto
Recomendaciones de uso de SVG
Incrustar en HTML
Los SVG pequeños incrustados directamente en HTML ahorran peticiones HTTP y se controlan con CSS.
Usar currentColor para iconos
Rellena el icono SVG con currentColor y cambia el color del icono solo con color en CSS; un mismo juego de iconos se reutiliza en varios colores.
Comprimir SVG
SVG es texto y puede comprimirse con herramientas (quitar comentarios, simplificar rutas). Comprime antes de publicar para reducir el tamaño.
Resumen
La esencia de SVG es "vectorial, escalable, editable". Para iconos, logos, ilustraciones y gráficos, SVG es lo mejor; las fotos, mejor con mapa de bits. La conversión de mapa de bits a SVG es adecuada para gráficos sencillos. La herramienta de conversión a SVG de DocsAll se procesa en el navegador y convierte un logo de mapa de bits a vectorial en un clic, facilitando su uso posterior en varios tamaños.