Por qué debería usar SVG en su sitio web

4.4 (87.09%) 127 votes


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.

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.

Soporte para navegadores antiguos

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *