Los gráficos vectoriales escalables, o SVG, juegan un papel importante en el diseño de sitios web hoy en día. Si actualmente no está utilizando SVG en su trabajo de diseño web, aquí hay algunas razones por las que debería empezar a hacerlo, así como también puede utilizar los complementos que puede utilizar para navegadores más antiguos que no soportan estos archivos.
Índice de contenidos
Resolución
El mayor beneficio de SVG es la independencia en la resolución. Debido a que los archivos SVG son gráficos vectoriales en lugar de imágenes raster basadas en píxeles, se pueden redimensionar sin perder calidad de imagen. Esto es especialmente útil cuando está creando sitios web con capacidad de respuesta que necesitan tener un buen aspecto y funcionar bien en una amplia gama de tamaños de pantalla y dispositivos.
Los archivos SVG se pueden escalar hacia arriba o hacia abajo para adaptarse a las necesidades cambiantes de tamaño y diseño de su sitio web con capacidad de respuesta y no necesita preocuparse de que esos gráficos pongan en peligro la calidad de cualquier paso del camino.
Tamaño del archivo
Uno de los retos con el uso de imágenes raster (JPG, PNG, GIF) en sitios web con capacidad de respuesta es el tamaño del archivo de esas imágenes. Debido a que las imágenes rasterizadas no escalan de la misma manera que las vectoriales, usted necesita entregar sus imágenes basadas en píxeles en el tamaño más grande en el que serán mostradas. Esto se debe a que siempre se puede hacer una imagen más pequeña y conservar su calidad, pero no ocurre lo mismo con las imágenes más grandes. El resultado final es que a menudo tienes imágenes que son mucho más grandes que las que se muestran en la pantalla de una persona, lo que significa que están siendo forzados innecesariamente a descargar un archivo muy grande.
SVG aborda este problema. Debido a que los gráficos vectoriales son escalables, puede tener tamaños de archivo muy pequeños, independientemente del tamaño de las imágenes que deban mostrarse. Esto tendrá en última instancia un impacto positivo en el rendimiento general del sitio y en la velocidad de descarga.
Estilo CSS
El código SVG también se puede añadir 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 como los gráficos son dibujados por el navegador basados en su código, no hay necesidad de hacer una petición HTTP para obtener un archivo de imagen. Otra ventaja es que el SVG en línea se puede estilizar con CSS.
¿Necesita cambiar el color de un icono SVG? En lugar de tener que abrir esa imagen en algún tipo de software de edición y exportar y cargar el archivo de nuevo, puede simplemente cambiar el archivo SVG con unas pocas líneas de CSS.
También puede utilizar otros estilos de CSS en gráficos SVG para cambiarlos en los estados flotantes o para ciertas necesidades de diseño. Incluso puede animar esos gráficos para añadir algo de movimiento e interactividad a una página.
Animaciones
Debido a que los archivos SVG en línea pueden ser estilizados con CSS, también puedes usar animaciones CSS en ellos. Las transformaciones y transiciones CSS son dos maneras fáciles de añadir vida a los archivos SVG. Usted puede obtener experiencias ricas como Flash en una página sin sucumbir a los inconvenientes que vienen con el uso de Flash en los sitios web de hoy.
Usos de SVG
Por muy poderoso que sea SVG, estos gráficos no pueden reemplazar cualquier otro formato de imagen que esté utilizando en su sitio web. Las fotos que requieren una profundidad de color profunda tendrán que ser un archivo JPG o tal vez un archivo PNG, pero las imágenes simples como los iconos son perfectamente adecuados para ser ejecutados como SVG.
SVG también puede ser apropiado para ilustraciones más complejas, como logotipos de empresas o gráficos y diagramas. Todos los gráficos se beneficiarán de ser escalables, capaces de ser estilizados con CSS, y de las otras ventajas que se enumeran en esta sección.
El soporte actual para SVG es muy bueno en los navegadores web modernos. Los únicos navegadores que realmente no son compatibles con estos gráficos son las versiones anteriores de Internet Explorer (versión 8 y posteriores) y algunas versiones anteriores de Android. En general, un porcentaje muy pequeño de la población que navega sigue utilizando estos navegadores, y ese número sigue disminuyendo. Esto significa que SVG se puede utilizar de forma bastante segura en los sitios web actuales.
Si desea proporcionar una solución alternativa para SVG, puede utilizar una herramienta como Grumpicon de Filament Group. Este recurso tomará sus archivos de imagen SVG y creará copias de seguridad PNG para navegadores más antiguos.
Editado por Jeremy Girard
