Los gráficos vectoriales escalables, o SVG, juegan un papel importante en el diseño de sitios web en la actualidad. Si actualmente no usa SVG en su trabajo de diseño web, aquí hay algunas razones por las que debería comenzar a hacerlo, así como alternativas que puede usar para navegadores más antiguos que no admiten estos archivos.
Resolución
El mayor beneficio de SVG es la independencia de la resolución. Debido a que los archivos SVG son gráficos vectoriales (a diferencia de las imágenes rasterizadas basadas en píxeles), puede cambiar su tamaño sin perder calidad de imagen. Esto es especialmente útil cuando crea sitios web receptivos que deben verse bien y funcionar bien en una amplia gama de dispositivos y tamaños de pantalla. Puede escalar los archivos SVG hacia arriba o hacia abajo para adaptarse a las necesidades cambiantes de tamaño y diseño de su sitio web receptivo sin comprometer su calidad de ninguna manera.
Por lo general, los archivos SVG tienen una apariencia más suave y nítida que las imágenes de otros formatos, independientemente del tamaño.
Tamaño del archivo
Un desafío con el uso de imágenes rasterizadas (p. ej., JPG, PNG, GIF) en sitios web adaptables es el tamaño del archivo. Debido a que las imágenes rasterizadas no se escalan como lo hacen las imágenes vectoriales, debe entregar sus imágenes basadas en píxeles en el tamaño más grande en el que se mostrarán. Esto se debe a que siempre puede reducir el tamaño de una imagen y conservar su calidad, pero no ocurre lo mismo con el aumento de tamaño de las imágenes. El resultado son imágenes mucho más grandes que el tamaño en el que se visualizan, lo que obliga a los navegadores a descargar archivos de gran tamaño.
Por el contrario, los gráficos vectoriales son escalables, por lo que puede utilizar tamaños de archivo muy pequeños independientemente del tamaño que deban mostrarse esas imágenes. En última instancia, esto optimiza el rendimiento general y la velocidad de descarga de un sitio.
Estilo CSS
Puede agregar fácilmente SVG directamente al HTML de una página. Esto se conoce como SVG en línea. Una de las ventajas de usar SVG en línea es que, dado que los gráficos los dibuja el navegador, no es necesario solicitar HTTP para obtener un archivo de imagen.
Otro beneficio: puede diseñar SVG en línea con CSS. ¿Necesita cambiar el color de un icono SVG? En lugar de editar esa imagen en el software de edición de gráficos y luego exportar y cargar el archivo nuevamente, puede cambiar el archivo SVG simplemente con unas pocas líneas de CSS. También puede usar CSS para cambiar los SVG para estados de desplazamiento y otras necesidades de diseño.
Conclusión
Debido a que puede diseñar archivos SVG en línea con CSS, también puede usar animaciones CSS en ellos. Las transformaciones y transiciones CSS son dos formas sencillas de añadir algo de vida a los SVG. Puede obtener ricas experiencias similares a las de Flash en una página sin utilizar Flash, que ya no es compatible con el iPad. De hecho, Adobe eliminará Flash a fines de 2020.
Usos de SVG
A pesar de lo poderosos que son los SVG, no pueden reemplazar cualquier otro formato de imagen. Las fotos que requieren una rica profundidad de color aún deben estar en formato-j.webp
SVG también es adecuado para algunas ilustraciones complejas, como gráficos, diagramas y logotipos de empresas. Todos estos gráficos se benefician de ser escalables y de poder diseñarse con CSS.
Compatibilidad con navegadores antiguos
La compatibilidad actual con SVG es muy buena en los navegadores web modernos. Los únicos navegadores que no son compatibles con estos gráficos son las versiones antiguas de Internet Explorer (que Microsoft ya no admite) y algunas versiones antiguas de Android. En general, un porcentaje muy pequeño de la población que navega todavía usa estos navegadores, y ese número continúa reduciéndose. Esto significa que puede usar SVG en su sitio web sin preocupaciones.
Si desea proporcionar una alternativa para SVG, utilice una herramienta como Grumpicon de Filament Group. Este recurso crea archivos-p.webp
