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

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
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

desinstalar-aplicaciones-en-Mac

Cómo desinstalar aplicaciones en Mac fácilmente

Desinstalar aplicaciones en Mac es un proceso muy sencillo, aunque es lógico que muchos principiantes en este sistema operativa tengan sus dudas. Y es que cuando has estado toda la vida operando en entornos Windows u otros como Linux, puedes estar algo perdido en acciones tan básicas como instalar o desinstalar aplicaciones en Mac. Índice

discos-duros-externos

Discos duros externos, la guía de compra que necesitas

Todo el mundo necesita discos duros externos. Aunque hoy los ordenadores dispongan de mucha memoria interna y la nube se haya consolidado en el mercado, estos aparatos siguen siendo necesarios para guardar todo tipo de información.   De eso se trata, de guardar la mucha información que hoy disponemos en archivos. A diferencia de la

descargar-videos-de-instagram

Cómo descargar vídeos de Instagram (2 soluciones útiles)

Hola instgramer, si estás buscando una app para poder descargar vídeos de Instagram de forma rápida, este artículo te ayudará.   Te habrás dado cuenta de que Instragram es una de esas redes sociales que se consideran imprescindibles para los usuarios millennials, así como la marcas. Instagram se ha convertido en una máquina de fabricar

Apple-Fitness+

Apple Fitness+: el deporte más tech

El nuevo servicio Apple Fitness+, desvelado en la última presentación de la compañía de Cupertino, promete elevar el deporte y el entrenamiento a otro nivel.   Queda claro que los últimos productos de Apple tienen una clara orientación al cuidado de la salud de las personas. A través del deporte, Apple quiere mover a sus

el-nuevo-Apple-Watch-SE

Nuevo Apple Watch SE: ¿merece la pena el sacrificio de funciones top?

Además de la presentación del nuevo Apple Watch 6, el último evento de Apple también dio a conocer el nuevo Apple Watch SE, el reloj barato de Apple.   No es nueva la referencia SE para los productos de Apple, pues como ya es sabido existen en el mercado varios iPhone SE, el último también

iPad-Air-2020 verde

iPad Air y iPad de 8ª generación: nuevos miembros para la familia iPad

Ojo al nuevo iPad Air… Además de la presentación de los nuevos Apple Watch y otros servicios como Apple One, la compañía de la manzana ha dado a conocer dos nuevos terminales para su familia de iPads: se trata del nuevo iPad Air y el iPad de octava generación.   En este artículo te mostraremos