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

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

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

VALORACIÓN DEL ARTÍCULO:
5/5


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

TAMBIÉN TE INTERESA

nuevo-Nothing-Phone

Nothing Phone (1): llega el teléfono más rompedor de los últimos tiempos

El mercado de la telefonía necesitaba un soplo de aire fresco como el que representa Nothing Phone (1). La compañía liderada por el que fuera fundador de One Plus acaba de anunciar un nuevo smartphone que promete ser el más rompedor del momento. Los consumidores nos habíamos acostumbrado a ciertos estándares de diseño tanto en

ecommerce

¿Vendes en Amazon? Sácale todo el partido al Amazon Prime Day

Se viene el gran evento mundial del año para Amazon y, por ende, el ecommerce. Los próximos 12 y 13 de julio llegan las rebajas más exclusivas para los clientes del marketplace. El Amazon Prime Day es el momento que muchos compradores esperan para adquirir productos de todo tipo a un precio reducido. Pero más

nube-de-acens

Aprovecha los descuentos en la nube de acens por su 25 aniversario

Desde 1997 hasta 2022 han pasado 25 años en los que acens, Part of Telefónica Tech, se ha convertido en una de las empresas pioneras del mundo digital, una de las tecnológicas más longevas de España y de las más innovadoras del mundo.   Desde su nacimiento en 1997, acens ha sido protagonista de algunos

iconos redes sociales

Las 5 redes sociales más atractivas para las empresas

Hoy es el día de las redes sociales y como tal, queremos informar a empresas y particulares sobre dos puntos de interés sobre estos canales. En primer lugar hablaremos de marketing y explicaremos cuáles son las mejores redes para las marcas. Y en segundo lugar nos centraremos en las ciberamenazas, las cuales están experimentando un

rebajas-de-Xiaomi-618

3 productos que no te puedes perder en las rebajas de Xiaomi 618

Llegan las rebajas en Xiaomi con los días de la llamada Xiaomi 618. Desde el 27 de junio hasta el 1 de julio inclusive se pueden encontrar auténticos chollos de michos productos del ecosistema Xiaomi. En este caso, nos vamos a centrar en tres gadgets de Remi que están a precio de derribo aplicando el

nuevo-Poco-F4

Flagship y todoterreno: así es el nuevo POCO F4

Ya es oficial. Poco ha presentado por todo lo alto sus dos nuevos teléfonos: el POCO F4. Ya nos habíamos anticipado con sus filtraciones en este post. Viendo ahora todo lo que ha dado de sí su presentación oficial, podemos decir que el F4 es, verdaderamente un smartphone todo terreno, capaz de competir con cualquier